Question

我有两个HTML输入元素。我需要通过将这些输入值一起添加来获得输出。我创建了一个JavaScript函数来做到这一点，但输出是＆＃34; NaN＆＃34;总是。

HTML：

<input type="text" id="value1" /> <br/>
<input type="text" id="value2" /> <br/>
<button id="button1" onclick="calc()">Calculate</button>
<p id="result"></p>

JavaScript的：

function calc()
{
    var x1 = document.getElementById('value1');
    var x2 = document.getElementById('value2');
    var r = x1+x2;
    document.getElementById('result').innerHTML=r;
}

如何在此处获得实际输出？

Answer 1

您需要获取输入的值属性。 document.getElementById 返回对输入本身的引用。另外，请避免使用 onclick 属性，最好使用 addEventListener 将逻辑与HTML分开。

此代码使用 parseInt 将输入值转换为数字。您也可以使用 parseFloat 。 isNaN 检查确保两个提交的值均为数字。 isNaN 如果测试的值不是数字，则返回true。

＆＃13;

document.getElementById("button1").addEventListener("click", function(evt) {
      var x1 = parseInt(document.getElementById('value1').value);
      var x2 = parseInt(document.getElementById('value2').value);
      if (isNaN(x1) || isNaN(x2)) {
        alert('Both values must be numeric');
      } else {
        document.getElementById('result').textContent = x1 + x2;
      }
    });

＆＃13;

<input type="text" id="value1" /> <br/>
<input type="text" id="value2" /> <br/>
<button id="button1">Calculate</button>
<p id="result"></p>

＆＃13;

Answer 2

只需将变量x1和x2编辑为：

var x1 = document.getElementById('value1').value;
var x2 = document.getElementById('value2').value;

如何正确获取Javascript中的HTML输入值？

2 个答案: