为什么我开发闲置游戏使用的JS按钮点击后无更新效果？

• 第一段代码核心问题：increase_keys 函数仅修改了keys变量的值，没有主动更新页面上的计数展示内容。window.onload 仅会在页面首次加载完成时执行一次，后续keys变量变更不会触发页面自动刷新展示，实际点击时keys数值已经正确累加，只是没有同步到页面，所以视觉上看起来按钮没有生效。
• 第二段代码核心问题：头部的if判断仅会在页面加载解析脚本时执行一次，既无法监听后续的用户点击操作，且DOM元素本身不存在原生的clicked属性，该判断逻辑完全不生效。

方案1：保留原有onclick绑定，补充页面更新逻辑 #

修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Keys</title>
<script>
var keys = 0;
window.onload = function() {
  updateCount()
}
// 把更新计数的逻辑抽成公共函数，页面加载和点击按钮时都可以调用
function updateCount() {
  document.getElementById("count").innerHTML="You have " + keys + " keys.";
}
function increase_keys() {
  keys++;
  updateCount(); // 每次累加钥匙后刷新页面展示
}
</script>
</head>
<body>
<button onclick="increase_keys()">Make Keys</button>
<p id="count"></p>
</body>
</html>

方案2：用addEventListener绑定点击事件（更规范的写法） #

如果你不想使用行内onclick属性，可以用事件绑定的写法，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Keys</title>
<script>
var keys = 0;
window.onload = function() {
  updateCount();
  // 页面加载完成后再给按钮绑定点击事件
  document.getElementById('give_key').addEventListener('click', function() {
    keys++;
    updateCount();
  })
}
function updateCount() {
  document.getElementById("count").innerHTML="You have " + keys + " keys.";
}
</script>
</head>
<body>
<button id="give_key">Make Keys</button>
<p id="count"></p>
</body>
</html>

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