求助：使用命名空间实现按钮点击计数程序时显示undefined问题

你好呀！我看你在做一个点击计数的小功能时遇到了几个细节问题，导致点击按钮后显示undefined，我来帮你一一排查并修复：

你的代码里的核心错误点： #

• 变量名大小写拼写错误：JavaScript是大小写敏感的语言，你在更新DOM时写的$S.antalCLick（注意最后是CLick），和你定义的变量$S.antalClick（最后是Click）拼写不一致，找不到对应的变量自然就返回undefined了。
• 递增逻辑写错了：$S.antalClick = +1; 这行代码是直接把变量赋值为1，而不是在原有数值基础上递增，正确的递增写法应该是$S.antalClick += 1; 或者更简洁的$S.antalClick++;。
• 内联事件绑定有误：onClick=$S.click() 这种写法会在页面加载时就立刻执行$S.click()函数，而不是点击按钮时才触发，正确的写法是把函数调用放在引号里：onClick="$S.click()"。

修正后的完整代码： #

<script>
var $S = {};
$S.antalClick = 0;
$S.click = function() {
  $S.antalClick++; // 正确实现数值递增
  document.getElementById("visa").innerHTML = $S.antalClick; // 修正变量名拼写
}
</script>
<input type="button" value="click me" onClick="$S.click()" />
<br/>
<div id="visa"></div>

额外优化建议（可选）： #

如果想让代码结构更清晰，也可以放弃内联事件绑定，改用DOM事件监听的方式，同时用textContent代替innerHTML（纯文本显示场景下更安全，避免HTML注入风险）：

<script>
var $S = {};
$S.antalClick = 0;
$S.click = function() {
  $S.antalClick++;
  document.getElementById("visa").textContent = $S.antalClick;
}
// 页面加载完成后再绑定点击事件
window.addEventListener('load', function() {
  document.querySelector('input[type="button"]').addEventListener('click', $S.click);
});
</script>
<input type="button" value="click me" />
<br/>
<div id="visa"></div>

内容的提问来源于stack exchange，提问作者Sebastian Andersson