如何正确获取 Javascript 中的 HTML 输入值？ [复制]答案

【问题标题】：How to get HTML input values in Javascript correctly? [duplicate]如何正确获取 Javascript 中的 HTML 输入值？ [复制]
【发布时间】：2017-10-11 03:52:14
【问题描述】：

我有两个 HTML 输入元素。我需要通过将这些输入值相加来获得输出。我创建了一个 JavaScript 函数来执行此操作，但输出始终为“NaN”。

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;
}

我如何在这里得到真正的输出？

【问题讨论】：

开始使用 jQuery。学习简单快捷

标签： javascript html

【解决方案1】：

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

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

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;
      }
    });

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢它的工作
这会使网页容易受到跨站脚本攻击。想象一下，如果有人给 value1 一个输入 <img src="xxx" onerror="doSomethingEvil()" />。您还需要检查输入是否为有效数字。
Thanx，但我只需要编辑我的代码即可使用它，这解决了它。我的任务非常小，所以我只需要一些代码。
此代码是否在可公开查看的网站上？如果是这样，您需要保护它，否则您会将您的用户置于危险之中。
不，这只是为了测试目的。我稍后会添加验证方法:)