Как динамически менять значение в переменной JS которая берет значение из input type=number

Для подсчёта стоимости делаю калькулятор. Есть несколько input type=number из которых берутся значения которые вводит посетитель сайта. Так как значения могут менятся то и переменные в калькуляторе должны постоянно меняться

//Пример
let area = document.getElementById(area);

В примере значение из input забирается лишь один раз при загрузке страницы. А как сделать динамическое перезаписывание переменной?


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

Автор решения: nazarpunk

const inputs = document.querySelectorAll('input');
const div = document.querySelector('div');

const sum = () => {
  let s = 0;
  inputs.forEach(i => s += +i.value);
  div.textContent = isNaN(s) ? 'Неверное значение' : `Сумма всех полей: ${s}`;
}
sum();

addEventListener('input', sum);
<input type='number' value='2'>
<input type='number' value='3'>
<input type='number' value='4'>
<input type='number' value='5'>
<div></div>

→ Ссылка
Автор решения: puffleeck

var x = 0;
var y = 0;
<input type='number' value='7' onchange='x=this.value; console.log(this.value + " x=" + x);'>
<hr>
<input type='number' value='7' oninput='y=this.value;console.log(this.value + " y=" + y);'>

выбирай какой вкуснее =)

→ Ссылка