Вывод сумы input которые находятся в динамических формах в JavaScript
Всем доброго времени суток! Только начал изучать JS. Подскажите пожалуйста, есть форма, в которой идет подсчет периметра и площади. Эта форма по нажатию кнопки может продублироваться, и в скопированной форме вводятся други данные. Как сделать чтобы сумма периметра и сумма площади во всех формах, а их может быть много, суммировались и выводились в отдельные input? Что бы был общий периметр и общая площадь. Я вроде и понимаю как это реализовать в теории, но как кодом это написать не пойму.
let allForms = document.querySelectorAll(".walls-form");
console.log(allForms);
/**
*Подсчет площади
*
*/
function funcStena() {
allForms = document.querySelectorAll(".walls-form");
for (let i = 0, max = allForms.length; i < max; i++) {
let form = allForms[i];
console.log(form.querySelector(".wf_wall"));
let stena = Number(form.querySelector(".wf_wall").value);
stena = parseFloat(stena);
let dlina = Number(form.querySelector(".wf_length").value);
dlina = parseFloat(dlina);
var visota = Number(form.querySelector(".wf_height").value);
visota = parseFloat(visota);
let result = (dlina + visota) * stena;
form.querySelector(".wf_result-wall").value = result;
}
}
/**
*Подсчет периметра
*
*/
function perimeter() {
for (let i = 0, max = allForms.length; i < max; i++) {
let form = allForms[i];
console.log(form.querySelector(".wf_wall"));
let stena = Number(form.querySelector(".wf_wall").value);
stena = parseFloat(stena);
let dlina = Number(form.querySelector(".wf_length").value);
dlina = parseFloat(dlina);
let result = dlina * stena;
form.querySelector(".wf_perimeter").value = result;
}
}
/**
*Добавление новой формы
*
*/
let form_i = 0;
function newForms() {
let clonedNode = document.getElementById("walls-form").cloneNode(true);
document.querySelector(".walls").appendChild(clonedNode);
form_i++;
}.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
div.walls {
display: flex;
}
.walls-form {
width: 250px;
position: relative;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-content: center;
border-radius: 5px;
background-color: #f2f2f2;
padding: 15px;
margin: 1px;
}
fieldset {
border-radius: 4px;
color: rgb(95, 95, 95);
}
.wf_leg-title {
font-size: 20px;
font-weight: 600;
color: #000;
}
input[type=number] {
width: 100%;
margin: 8px 0;
display: inline-block;
outline: none;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 12px 20px 12px 20px;
}
input[type=number]:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(186, 221, 193, 0.6);
outline: none;
}
input[type=number]:hover {
background-color: #f7f7f7;
outline: none;
}
input[type=text] {
width: 48%;
height: 35px;
margin: 8px 0;
display: inline-block;
outline: none;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 12px 20px 12px 20px;
margin-left: 5px;
}
button.remove-form {
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
margin: -186px 0 0 226px;
}
button.remove-form:hover {
background-color: #d8d8d8;
}
.wf_calc-btn,
.add-form {
width: 100px;
text-align: center;
background-color: #4CAF50;
color: white;
padding: 12px 20px;
margin: 14px 0 8px 0;
display: inline-block;
border: none;
outline: none;
border-radius: 4px;
box-shadow: inset 0 1px 3px #ddd;
}
.wf_calc-btn:hover {
background-color: #50c254;
outline: none;
}
.wf_calc-btn:active {
background-color: #3db641;
border: none;
outline: none;
}
.wf_result-formula {
display: flex;
}
.wf_area-all {
margin-left: 5px;
font-weight: 600;
}<section class="walls-all">
<div class="walls-wrp" id="walls-wrp">
<div class="walls" id="walls">
<form action="#" class="walls-form" id="walls-form" name="walls-form">
<fieldset>
<legend class="wf_leg-title">Стена</legend>
<label class="wf_number-walls">Количество стен </label>
<input class="wf_wall" id="wf-stena" type="number" name="wf-stena" step="1" min="1" value="1" onkeyup="funcStena(); perimeter()">
<label class="wf_length-title">Длина, м </label>
<input class="wf_length" id="wf-dlina" type="number" name="wf-dlina" step="0.0001" min="0" onkeyup="funcStena(); perimeter()">
<label class="wf_height-title">Высота, м </label>
<input class="wf_height" id="wf-visota" type="number" name="wf-visota" step="0.0001" min="0" onkeyup="funcStena(); perimeter()">
<label class="wf_perimeter-title visually-hidden1">Периметр, м </label>
<input class="wf_perimeter visually-hidden1" id="wf_perimeter" type="number" name="wf-perimeter" step="0.0001" min="0" onkeyup="allPerimetrs()">
<div class="wf_result-formula">
<p class="wf_area-all">Площадь:</p>
<input class="wf_result-wall" id="wf-result" type="text" name="wf-result">
<p class="wf_area-all">м²</p>
</div>
</fieldset>
<button class="remove-form" type="button" onclick="funcStena0()">X</button>
</form>
</div>
</div>
<!--
<button class="wf_calc-btn" type="button" onclick="funcStena0()">Посчитать</button>
-->
<button class="add-form" type="button" onclick="newForms()">Добавить</button>
<br>
<label class="wf_perimeter-all-title">Общий периметр, м </label>
<input class="wf_perimeter-all" onclick="totalSum()" id="wf_perimeter-all" type="number" name="wf-perimeter" step="0.0001" min="0">
<br>
<label class="wf_area-all2-title">Общая площадь, м² </label>
<input class="wf_area-all2" id="wf_area-all2" type="number" name="wf_area-all2" step="0.0001" min="0">
</section>