getElementById не рабоает - всегда идет NaN

[davno_pora]

HTML

<label>Width in mm:</label><br>
<input type="number" min=0 class="spacerSize" id="width" /><br/>
<label>Height in mm:</label><br>
<input type="number" min=0 class="spacerSize" id="height" /><br/>
<button class="btn btn-hero" onclick="showResults()">click me</button>

JS

var width =  document.getElementById("width").value;
var height = document.getElementById("height").value;

function showResults() {
	console.log(width);
    width = parseInt(width);
    height = parseInt(height);
	console.log(width);
	console.log(height);
}

когда нажыимаю кнопку, получается NaN. Почему?

[Белый шум]

Потому что переменные width и height заполняются значениями только 1 раз - в момент загрузки страницы. При этом изначальные значения соответствующих инпутов пусты, т.е. соответствуют NaN (Not a Number).

Перенесите заполнение этих переменных в начало функции.

[davno_pora]

Потому что переменные width и height заполняются значениями только 1 раз - в момент загрузки страницы. При этом изначальные значения соответствующих инпутов пусты, т.е. соответствуют NaN (Not a Number).

Перенесите заполнение этих переменных в начало функции.

Спасибо огромное! Три дня с этим мучился!