Значение глобальной переменной не меняется, хотя меняется ее локальное значение

Question

Значение глобальной переменной currentLength изменяется путем ввода различных значений для ввода.Необходимо, чтобы значение глобальной переменной currentLength было равно текущему значению на входе.

Ввод числа 120, alert должен работать, он не работает, что означает, что значение глобальной переменной не переопределено.

function getCurrentLength() {
  let currentLength = 0;
  let output = document.getElementById('output');

  calcLength();

  function calcLength() {
    let total = +output.value;
    let len = document.getElementsByClassName('len');
    for (let i = 0; i < len.length; i++) {
      len[i].addEventListener('input', function() {
        let value = 0;
        currentLength = +len[i].value;
        for (let j = 0; j < len.length; j++) {
          let num = +len[j].value || 0;
          value += num;
        }
        output.value = total + value;
      })
    }
  }

  if (currentLength === 120) {
    alert(currentLength)
  }
}
getCurrentLength();

<input type="text" placeholder="length" class="len">
<input type="text" placeholder="length" class="len">
<input type="text" placeholder="length" class="len">
<input type="text" placeholder="length" class="len">
<input type="text" placeholder="length" class="len">
<input type="text" id="output" placeholder="output">

Я ожидаю, что значение currentLength равно 120, но это значение s all the time 0, be it alert or just using of currentLength` для дальнейших глобальных операций ничего не дает.

Answer 1

Причина довольно проста: вы проверяете currentLength === 120 один раз при вызове getCurrentLength, но в это время currentLength нет, потому что currentLength устанавливается только при изменении поля ввода.

Измените currentLength === 120 чек, чтобы он был внутри обработчика событий, тогда вы получите ожидаемый результат:

// ...
output.value = total + value;
if (currentLength === 120) {
    alert (currentLength);
}
// ...