使用HTML和JavaScript实现简易计数器时遭遇add()与sub()函数未定义问题

看起来你遇到的问题很典型——在线编辑器能正常运行，本地却提示add()和sub()不是函数，我来帮你拆解原因和解决办法：

为什么在线编辑器没问题？ #

Codepen、JSFiddle这类平台默认会把你的JavaScript代码放在全局作用域中，而且会确保脚本在DOM加载完成后执行，内联的onclick事件能顺利找到全局环境里的add和sub函数。但你的本地环境可能有不一样的配置，导致函数没暴露到全局。

常见原因和解决方案 #

1. 脚本被设为模块模式 #

如果你的脚本标签加了type="module"（比如<script type="module" src="your-script.js"></script>），模块里的变量和函数默认不会暴露到全局作用域，内联onclick自然找不到它们。

解决办法：把函数挂载到window对象上，强制暴露到全局：

var x = 0;
window.add = function() {
  document.getElementById("result").innerHTML = x += 1;
};
window.sub = function() {
  document.getElementById("result").innerHTML = x -= 1;
};

2. 改用事件监听器（推荐） #

内联onclick本身就有作用域混乱、难以维护的问题，换成addEventListener能彻底规避这类问题，还能让代码更规范：

修改后的HTML（去掉内联onclick）

<div class="main">
  <div id="button">
    <h1>Click Me</h1>
    <p>Number<button id="add">+</button></p>
    <span id="result"></span>
    <button id="sub">-</button>
  </div>
</div>

修改后的JavaScript

var x = 0;
// 提前获取DOM元素，避免重复查询
const resultElement = document.getElementById("result");

document.getElementById("add").addEventListener("click", function() {
  resultElement.textContent = x += 1; // 用textContent比innerHTML更安全哦
});

document.getElementById("sub").addEventListener("click", function() {
  resultElement.textContent = x -= 1;
});

这里顺便提一句：用textContent代替innerHTML更安全，因为你只是更新纯文本，没必要触发HTML解析。

关于JSHint的提示 #

JSHint提示“两个未使用的变量”，是因为它检测不到内联onclick对add和sub的调用。如果用上面的事件监听器方案，这个提示会自动消失；如果坚持用内联写法，可以在脚本开头加注释/* exported add sub */，告诉JSHint这两个函数是对外暴露的。

内容的提问来源于stack exchange，提问作者JoJo Potato Wedge