如何在JavaScript中对变量执行算术运算？新手遇NaN问题求助

嘿，我来帮你搞定这个NaN的问题！你遇到的坑其实是JavaScript里**变量提升（Hoisting）**的经典新手雷区。

先拆解问题根源：
在add()函数里，你写了var example = example + 10——这里用var重新声明了一个局部的example变量。因为var的特性，函数作用域里的这个变量会被「提前声明」但不会提前赋值，所以当你执行example + 10的时候，这个局部的example还是undefined，undefined + 10自然就得到NaN了！

另外还有个小细节要修正：你的HTML标签写错了，<P id="text"></text>应该改成<p id="text"></p>，闭合标签要和开头一致，不然可能影响DOM元素的正常获取。

下面给你两种贴合需求的解决方案：

方案1：修改全局变量（适配你的累加需求） #

如果你想让点击按钮后全局的example值持续累加，直接去掉函数里的var声明就行，这样函数会直接引用全局作用域的example变量：

var example = 30;
function add() {
  example += 10; // 等价于 example = example + 10，写法更简洁
  document.getElementById("text").innerHTML = example;
}

修正后的HTML：

<p id="text"></p>
<button onclick="add()">点击累加</button>

方案2：基于全局值创建局部变量（如果需要区分全局与局部） #

如果你想在函数里创建独立的局部变量，但值基于全局example，可以明确引用全局变量（浏览器环境下全局变量挂在window对象上）：

var example = 30;
function add() {
  var localExample = window.example + 10;
  document.getElementById("text").innerHTML = localExample;
}

不过这种方案里全局的example值不会被修改，每次点击都会基于初始的30加10得到40，和你的累加需求可能不符，所以方案1更适合你。

最后给你个新手小贴士：现在开发里更推荐用let和const代替var，它们的块级作用域更清晰，能避免很多变量提升导致的奇怪问题。比如把全局变量改成let example = 30，后续维护起来会更省心~

内容的提问来源于stack exchange，提问作者Joshua Riefman