JS使用getElementsByName获取表单值计算返回NaN如何解决？

错误原因 #

• document.getElementsByName() 返回的是所有匹配name属性的DOM节点组成的类数组集合，不是单个元素，直接访问.value得到的是undefined，参与运算后结果自然为NaN。你可以通过索引[0]取页面中第一个匹配的元素，更稳妥的方案是给input添加id属性，用document.getElementById()直接获取单个元素，避免索引取值的风险。
• 从input中读取的value默认是字符串类型，即使正确拿到值，直接用+运算优先触发字符串拼接，且输入非数字内容时转数值会得到NaN，需要先做显式的数值转换，最好增加合法性校验避免异常。

修复后的代码 #

JavaScript代码

function test() {
  // 取集合第一个元素后转数值
  var age = Number(document.getElementsByName("person_age")[0].value);
  var weight = Number(document.getElementsByName("person_weight")[0].value);
  var size = Number(document.getElementsByName("person_size")[0].value);

  // 校验输入是否为有效数字
  if (isNaN(age) || isNaN(weight) || isNaN(size)) {
    document.getElementById("result").textContent = "请输入合法的数字";
    return;
  }

  document.getElementById("result").textContent = weight + size + age;
}

你的HTML代码无需修改，替换JS代码后即可正常运行。

内容的提问来源于stack exchange，提问作者Mert Kahramantürk