Javscript: сложение двух чисел из полей ввода и затем печать ответа на внутреннюю HTML этикетки.

Question

Я новичок в JS, и мне было интересно, может ли кто-нибудь мне помочь. Это довольно простая задача ... по крайней мере, теоретически. Итак, из этих двух изображений, которые я предоставил, я, по сути, пытаюсь собрать два числа из пользовательского ввода из полей ввода, затем сложить их вместе, а затем распечатать добавленное число внутри html этикетки. . Всякий раз, когда я пытаюсь изменить код, этикетка никогда не распечатывает добавленные числа вместе и всегда меняет внутреннее HTML метки на «NaN». Я поместил 0 внутри HTML метки, чтобы показать заполнитель, и поэтому я знаю, что два числа действительно были сложены вместе, любая помощь по этому поводу будет очень принята. (Между прочим, все это делается нажатием кнопки, которую вы можете видеть внизу моего HTML)

<script src="practice.js" defer></script>
<h>Add two numbers</h>
<input type="text" id="num1">
<input type="text" id="num2">
<label id="ans">0</label>
<button id="calc">Calculate</button>

Это HTML вверху, внизу JS

var num1a = document.getElementById("num1").value
var num2a = document.getElementById("num2").value
var num1b = parseInt(num1a)
var num2b = parseInt(num2a)
var answer1a = num1b + num2b
var answer1b = answer1a.toString()
var ans = document.getElementById("ans").innerHTML

document.getElementById("calc").onclick = function(){
   ans = answer1a.toString()
}

(Извините, я новичок в StackOverflow, не знал, как правильно разместить здесь код)

Answer 1

Когда вы запускаете предоставленный вами код, вы меняете значение переменной ans, а не значение innerHTML вашего элемента, чтобы сделать то, что вы пытаетесь сделать, используйте следующий код внутри ваша функция onclick:

document.getElementById('ans').innerHTML=answer1b

Кроме того, чтобы проверить ТЕКУЩЕЕ значение полей ввода, поместите все объявления переменных внутри функции onclick, это установит значения в то время, когда вы нажимаете кнопку