Js и числовые зависимости в столбцах

Question

Пытаюсь написать на js таблицу зависимостей для лазерного станка. Суть простейшая, как в экселе: при изменении одного параметра - меняются другие параметры.

В первые колонки вводим базовые параметры - скорость, задержки включения, выключения. А во второй колонке вводим желаемую новую скорость, а все задержки меняются в зависимости от того, во сколько отличается новая скорость от базовой.

Например, базовая скорость 500, включение 100, выключение 200. Вводим новую скорость 1000, получаем включение 200, выключение 400.

По факту нужно определить что в инпутах и разделить/умножить переменные по формуле.

<div class="container">
               <table class="table table-striped table-dark">
                 <thead>
                    <tr>
                       <th scope="col">Скорость</th>
                       <th scope="col">Start TC (US)</th>
                       <th scope="col">Laser OFF TC (US)</th>
                       <th scope="col">END TC (US)</th>
                       <th scope="col">Polygon TC (US)</th>
                    </tr>
                 </thead>
                 <tbody>
                    <tr>
                        <td><input type="text" class="basic_speed" value="500"></td>
                        <td><input type="text" class="basic_start_tc" value="300"></td>
                        <td><input type="text" class="basic_laser_off_tc" value="100"></td>
                        <td><input type="text" class="basic_end_tc" value="300"></td>
                        <td><input type="text" class="basic_polygon_tc" value="100"></td>
                    </tr>
                    <tr>
                        <td><input type="text" class="speed" value="0"></td>
                        <td class="start_tc"></td>
                        <td class="laser_off_tc"></td>
                        <td class="end_tc"></td>
                        <td class="polygon_tc"></td>
                    </tr>
                 </tbody>
               </table>
           </div>

           <script>
               let speed = document.querySelector('.speed')
               let basic_start_tc = document.querySelector('.basic_start_tc')
              
               

               let td = document.querySelector('.start_tc')
               td.textContent = basic_start_tc / (basic_speed/speed);
           </script>

Answer 1

<script>
    document.querySelector('.speed').addEventListener('input', function(){
        const divider = document.querySelector('.basic_speed').value / document.querySelector('.speed').value;
        document.querySelector('.start_tc').textContent = document.querySelector('.basic_start_tc').value / divider;
        document.querySelector('.laser_off_tc').textContent = document.querySelector('.basic_laser_off_tc').value / divider;
        document.querySelector('.end_tc').textContent = document.querySelector('.basic_end_tc').value / divider;
        document.querySelector('.polygon_tc').textContent = document.querySelector('.basic_polygon_tc').value / divider;
    });
</script>

БЛОГ НА HUSL

Js и числовые зависимости в столбцах

Ответы (1 шт):