为何变量result1执行基础运算时返回NaN？已尝试parseInt仍无效

核心问题 #

你直接把DOM元素对象当作数字来转换了：document.getElementsByClassName("number1")[0]获取到的是<div class="number1">33</div>这个DOM节点对象，不是里面的"33"文本内容。元素对象无法直接转换为有效数字，所以x和y的值都是NaN，相加结果自然也是NaN。

你之前用parseInt没解决，大概率是直接对DOM元素调用parseInt，比如parseInt(document.getElementsByClassName("number1")[0])——这时候parseInt会先把元素对象转成字符串"[object HTMLDivElement]"，这个字符串转数字就是NaN，所以没用。

解决方法 #

先获取元素内部的文本内容，再把文本转换成数字。可以用textContent或innerText属性提取文本，再通过+、parseInt或parseFloat完成转换。

修改后的代码示例 #

方法一：用+快速转数字

let x = +document.getElementsByClassName("number1")[0].textContent;
let y = +document.getElementsByClassName("number2")[0].textContent;
let result1 = x + y;
document.getElementById("ok1").innerHTML = result1;

document.getElementById("numberOrnot").innerHTML = typeof result1;

方法二：用parseInt（适合整数场景）

// 注意加上第二个参数10，指定十进制解析
let x = parseInt(document.getElementsByClassName("number1")[0].textContent, 10);
let y = parseInt(document.getElementsByClassName("number2")[0].textContent, 10);
let result1 = x + y;
document.getElementById("ok1").innerHTML = result1;

document.getElementById("numberOrnot").innerHTML = typeof result1;

补充说明 #

• textContent会获取元素内的所有文本（包括隐藏内容），innerText只获取可见文本，根据实际需求选择即可。
• 使用parseInt时务必加上进制参数，避免遇到以0开头的文本时被当作八进制解析的问题。

内容的提问来源于stack exchange，提问作者isabella martins