<div id="inputs-box">
<input type="number">
<input type="number">
<input type="number">
</div>
<a href="javascript:void(0)" id="add-input-btn">добавить поле</a>
<h2 id="result-box">Результат: 0</>
input {
padding: .5em 1em;
margin: .5em 0;
}
#inputs-box {
width: 100%;
max-width: 200px;
display: flex;
flex-direction: column;
}
const addInputBtn = document.getElementById('add-input-btn');
const inputsBox = document.getElementById('inputs-box');
const resulBox = document.getElementById('result-box');
addInputBtn.addEventListener('click', e => {
let inpt = document.createElement('input');
inpt.type = 'number';
inputsBox.appendChild(inpt);
})
inputsBox.addEventListener('input', e => {
let sum = 0;
inputsBox.querySelectorAll('input').forEach(el => sum += +el.value)
resulBox.textContent = `Резульат: ${sum}`;
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.