0

Я новичок в js. Задание заключается в том, чтобы дополнительные поля также перемножались и выводилось значение в результате(как с основными полями 1-я панель и 2-я панель). буду очень благодарен за помощь!

function addQuestion() {

var d = document;

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="num10" type="number" value="0" name=""> 
            x
            <input class="num" id="num11" type="number" value="0" name="">
            см
          </span>
        </div> `;
  document.getElementById("parentId").appendChild(newdiv);
        
};

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


      let result = document.getElementById("result"); 

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

      function calc(){
      
        var price = 0;
        var price2 = 0;
        
        price += parseInt(input.value) * parseInt(input2.value);
        price += parseInt(input3.value) * parseInt(input4.value);
       
        result.innerHTML = price


      }  


    }
<div id="page" class="site">
    <section id="calculator">
      
      <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 id="parentId"></div>
          </div>
          <hr>
  
            <span class="line-label">Итого</span>
            <span class="byn2">&nbsp;руб</span>
            <span class="byn2" id="result">0</span>
          </div>
        </div>

    </section>
  </div>

17
  • Зачем вы убрали мои изменения?
    – EzioMercer
    9 авг 2022 в 8:37
  • сори, я просто изменил код и все изменения слетели, я хотел не много сократить его до минимума нужной информации. если несложно изменить еще раз, я не знаю как ты это сделал просто
    – user514239
    9 авг 2022 в 8:44
  • В редакторе нажимаешь на CTRL+M и пишешь код по нужным блокам. А вообще можно было просто нажать на "редактировать пример кода" под кодом и всё
    – EzioMercer
    9 авг 2022 в 8:46
  • а с этим заданием ты сможешь помочь?
    – user514239
    9 авг 2022 в 8:57
  • Приведи сначала всё в порядок, чтобы людям удобно было читать. А потом кто-нибудь (не факт что я) тебе поможет
    – EzioMercer
    9 авг 2022 в 8:59

1 ответ 1

0

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

var lastId = 9; // номер последнего inputa

    let res = document.getElementById('result');

    function calc2() {
            var price = 0;
            inputs = document.querySelectorAll('input');
            
            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);
      }
            
    };

    
    window.onload = function(){
          let input = document.getElementById('num');
          let input2 = document.getElementById('num2');
          let input3 = document.getElementById('num3');
          let input4 = document.getElementById('num4');  
        
    
    
          let result = document.getElementById("result"); 
    
          let inputs = document.querySelectorAll('input');
         
          for (var i = 0; i < inputs.length; i++) {
           inputs[i].addEventListener('change', calc2);
          }
    
    
        }
<div id="page" class="site">
    <section id="calculator">
      
      <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 id="parentId"></div>
          </div>
          <hr>
  
            <span class="line-label">Итого</span>
            <span class="byn2">&nbsp;руб</span>
            <span class="byn2" id="result">0</span>
          </div>
        </div>

    </section>
  </div>

3
  • Огромное спасибо!! Действительно очень сильно помог. Благодарю тебя
    – user514239
    15 авг 2022 в 7:58
  • Если помог, стоило бы галочку на ответе поставить.. :) 15 авг 2022 в 14:54
  • Просто еще не умею пользоваться этим сайтом, но уже поставил
    – user514239
    16 авг 2022 в 7:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.