Я новичок в 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"> руб</span>
<span class="byn2" id="result">0</span>
</div>
</div>
</section>
</div>