Как сделать 3 калькулятора расчета на одной странице? (JAVASCRIPT)

Question

В примере указаны три калькулятора на одной странице. Нужно чтобы они работали независимо друг от друга, то есть по отдельности был вывод результата в "Итого". У меня работает только первый калькулятор почему-то, остальные не реагируют. Очень нужна ваша помощь, в этом деле новичок!

   var lastId = 9; // номер последнего inputa
let res = document.getElementById('result');

function calc2() {
  var price = 0;
  inputs = document.querySelectorAll('input, select');

  for (var i = 0; i < inputs.length; i += 2) { // посчитаем сумму всех инпутов
    price += inputs[i].value * inputs[i + 1].value;
    inputs[i].addEventListener('change', calc2);
  }
  res.innerHTML = price;
}


function addQuestion() {

  var d = document;

  let inputs = document.querySelectorAll('input');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('change', calc2);
  }

  var newdiv = d.createElement("div");
  newdiv.innerHTML = `<div class="line1">
                <div class="label-cal">
                    <label class="ttll" for>Следующая панель</label>
                </div>
                <span class="nn">
                    <input class="num"  id="num${++lastId}" type="number" value="0" name=""> 
                    x
                    <input class="num" id="num${++lastId}" type="number" value="0" name="">
                    см
                </span>
                </div> `;
  document.getElementById("parentId").appendChild(newdiv);

  inputs = document.querySelectorAll('input');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('change', calc2);
  }

};



let input = document.getElementById('num');
let input2 = document.getElementById('num2');
let input3 = document.getElementById('num3');
let input4 = document.getElementById('num4');






let inputs = document.querySelectorAll('input, select');

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', calc);
}

function calc() {

  var price = 0;


  price += parseInt(input.value) * parseInt(input2.value);
  price += parseInt(input3.value) * parseInt(input4.value);


  res.innerHTML = price;


}

<section id="calculator">
    <div class="container">
      <div class="wr">
        <div class="cal-1">
          <div class="line1">
            <div class="label-cal">
              <label class="ttll" for>1-я панель</label>
            </div>
            <span class="nn">
            <input class="num"  id="num" type="number" value="0" name=""> 
            x
            <input class="num" id="num2" type="number" value="0" name="">
            см
          </span>
          </div>
          <div class="line1">
            <div class="label-cal">
              <label class="ttll" for>2-я панель</label>
            </div>
            <span class="nn">
            <input class="num" id="num3"  type="number" value="0" name=""> 
            x
            <input class="num" id="num4"  type="number" value="0" name=""> 
            см  
          </span>
            <div class="btn-cal" id="add" onclick="addQuestion()">Добавить</div>
          </div>
          <div id="parentId"></div>
          

          <hr>
          <div class="cal-line">
            <span class="line-label">Итого</span>
            <span class="byn2">&nbsp;руб</span>
            <span class="byn2" id="result">0</span>
          </div>
        </div>
      </div>
  </section>




    <section id="calculator">
      <div class="container">
        <div class="wr">
          <div class="cal-1">
            <div class="line1">
              <div class="label-cal">
                <label class="ttll" for>1-я панель</label>
              </div>
              <span class="nn">
            <input class="num"  id="num" type="number" value="0" name=""> 
            x
            <input class="num" id="num2" type="number" value="0" name="">
            см
          </span>
            </div>
            <div class="line1">
              <div class="label-cal">
                <label class="ttll" for>2-я панель</label>
              </div>
              <span class="nn">
            <input class="num" id="num3"  type="number" value="0" name=""> 
            x
            <input class="num" id="num4"  type="number" value="0" name=""> 
            см  
          </span>
              <div class="btn-cal" id="add" onclick="addQuestion()">Добавить</div>
            </div>
            <div id="parentId"></div>
           

            <hr>
            <div class="cal-line">
              <span class="line-label">Итого</span>
              <span class="byn2">&nbsp;руб</span>
              <span class="byn2" id="result">0</span>
            </div>
          </div>
        </div>
    </section>
   


      <section id="calculator">
        <div class="container">
          <div class="wr">
            <div class="cal-1">
              <div class="line1">
                <div class="label-cal">
                  <label class="ttll" for>1-я панель</label>
                </div>
                <span class="nn">
            <input class="num"  id="num" type="number" value="0" name=""> 
            x
            <input class="num" id="num2" type="number" value="0" name="">
            см
          </span>
              </div>
              <div class="line1">
                <div class="label-cal">
                  <label class="ttll" for>2-я панель</label>
                </div>
                <span class="nn">
            <input class="num" id="num3"  type="number" value="0" name=""> 
            x
            <input class="num" id="num4"  type="number" value="0" name=""> 
            см  
          </span>
                <div class="btn-cal" id="add" onclick="addQuestion()">Добавить</div>
              </div>
              <div id="parentId"></div>
              

              <hr>
              <div class="cal-line">
                <span class="line-label">Итого</span>
                <span class="byn2">&nbsp;руб</span>
                <span class="byn2" id="result">0</span>
              </div>
            </div>
          </div>
      </section>

Answer 1

Не идеальный вариант, но принцип, думаю, будет понятен:

let inputs = document.querySelectorAll('input[type=number]');
let output1 = document.getElementById('res1');
let output2 = document.getElementById('res2');
let output3 = document.getElementById('res3');

inputs.forEach(el => el.addEventListener('change', function(){result(this);}));

function result(el) {
  const base = parseInt(el.value);
  let res;
  switch (el.id) {
    case 'first':
      res = parseInt(base) * 2;
      output1.innerText = `${base} x 2 = ${res}`;
      break;
    case 'second':
      res = parseInt(base) * 3;
      output2.innerText = `${base} x 3 = ${res}`;
      break;
    case 'third':
      res = parseInt(base) * 10;
      output3.innerText = `${base} x 10 = ${res}`;
      break;
  }
}

body {
  display: grid;
  justify-content: center;
}

<input id='first' type='number' value='0'>
<span id='res1'>0</span>
<input id='second' type='number' value='0'>
<span id='res2'>0</span>
<input id='third' type='number' value='0'>
<span id='res3'>0</span>

БЛОГ НА HUSL

Как сделать 3 калькулятора расчета на одной странице? (JAVASCRIPT)

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