使用 JavaScript 将文本框中的两个数字相加

Question

我只是想编写一个简单的 JavaScript 程序，该程序将演示如何从文本字段获取用户输入，然后单击按钮将在段落中显示这些数字的求和结果。但不幸的是下面的代码不起作用。单击该按钮会在段落中显示 NAN。

<input type="text" name="" id="num1"><br><br>
<input type="text" name="" id="num2"><br> <br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
<script>
    let num1=parseInt(document.getElementById("num1"));
    let num2=parseInt(document.getElementById("num2"));
    let add=document.getElementById("add");

    add.addEventListener("click",function(){
    document.getElementById("para").innerHTML=num1+num2;

});

</script>

Answer 1

您正在获取 elementById，但未获取该 ID 值。

在 getElementById 末尾添加 .value

function addTogether()
{
  var val1 = document.getElementById('val1').value;
  var val2 = document.getElementById('val2').value;

  var sum = parseInt(val1) + parseInt(val2);
  console.log(sum);
}

<input type="text" id="val1" />
<input type="text" id="val2" />
<input type="button" value="Add Them Together" onclick="addTogether();" />

Answer 2

您需要获取 num1 和 num2 的值，并且需要在单击后获取该值 - 所以在您的函数内

<input type="text" name="" id="num1"><br><br>
<input type="text" name="" id="num2"><br> <br>
<button id="add">Answer</button>
<br>
<p id="para"></p>
<script>
    
    let add=document.getElementById("add");
    
    add.addEventListener("click",function(){
    let num1=parseInt(document.getElementById("num1").value);
    let num2=parseInt(document.getElementById("num2").value);
    
   
    
    document.getElementById("para").innerHTML=num1+num2;
});

</script>

Answer 3

你可以简单地这样做，

<input type="text" id="num1"><br><br>
<input type="text" id="num2"><br><br>
<button id="add">Answer</button><br>
<p id="para"></p>
<script>
    let add=document.getElementById("add");
    add.addEventListener("click",function(){
       var num1 = document.getElementById('num1').value;
       var num2 = document.getElementById('num2').value;
       var res = parseInt(num1) + parseInt(num2);
       document.getElementById("para").innerHTML = res ;
    });
</script>

这是工作代码的演示

let add=document.getElementById("add");

add.addEventListener("click",function(){
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var res = parseInt(num1) + parseInt(num2);
  document.getElementById("para").innerHTML = res ;
});

<input type="text" id="num1"><br><br>
<input type="text" id="num2"><br><br>
<button id="add">Answer</button>
<br>
<p id="para"></p>