如何实现按钮点击次数始终显示？现有代码仅点击后展示

嘿，这个问题很好解决！你现在的代码只有在点击按钮时才会触发显示逻辑，页面刚加载的时候完全没执行这块代码，所以一开始看不到次数。我们只需要让页面加载完成后就自动执行一次统计和显示的逻辑就行，同时调整下初始化的数值（没点击过应该显示0次而不是直接设为1）。

这里给你修改后的完整代码：

<html>
<head>
<script>
// 页面加载完成后立即初始化并显示点击次数
window.onload = function() {
  updateClickDisplay();
};

// 专门负责更新显示的函数
function updateClickDisplay() {
  if(typeof(Storage) !== "undefined") {
    // 如果本地存储里还没有点击次数，先初始化为0
    if (!localStorage.clickcount) {
      localStorage.clickcount = 0;
    }
    document.getElementById("clicks").innerHTML = `You have clicked the button ${localStorage.clickcount} time(s).`;
  } else {
    document.getElementById("clicks").innerHTML = "Sorry, your browser does not support web storage...";
  }
}

// 按钮点击时的逻辑：计数+1后更新显示
function clickCounter() {
  if(typeof(Storage) !== "undefined") {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
    updateClickDisplay();
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="clicks"></div>
</body>
</html>

关键修改点说明：

• 新增了window.onload事件，确保页面加载完成后就调用updateClickDisplay，这样打开页面就能看到初始的0次点击。
• 把显示逻辑抽成独立的updateClickDisplay函数，不管是初始化还是点击按钮后，都复用这个函数更新显示，避免重复写相同代码。
• 初始化时将不存在的clickcount设为0，这样未点击按钮时会正确显示“0 time(s)”，逻辑更合理。

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