变量递增失效：点击HTML按钮无法增加JavaScript变量值

嘿，我发现你的问题出在哪了——你只让变量pokemon_ID自增了，但没把新的变量值重新渲染到页面上呀！你现在的代码只在初始化的时候给id-number div赋值了一次，但点击按钮后变量变了，页面并不会自动同步这个变化，得我们手动去更新DOM才行。

我给你调整了两种可行的写法，都能正常工作：

方式1：修改内联onclick的函数逻辑 #

把更新页面的代码放到increasePokemon_ID函数里，这样每次点击按钮，变量自增后立刻刷新显示：

<div id="id-number"></div>
<a id="right-btn" onclick="increasePokemon_ID()">点击增加ID</a>

<script>
var pokemon_ID = 1;

// 页面加载先显示初始值
updateIDDisplay();

function increasePokemon_ID() {
  pokemon_ID++;
  // 变量变了，赶紧更新页面！
  updateIDDisplay();
}

// 把更新显示的逻辑抽成单独函数，复用起来更方便
function updateIDDisplay() {
  // 处理数字补零，比如1显示001，10显示010，100显示100
  var displayText = "no. " + (pokemon_ID < 10 ? "00" : pokemon_ID < 100 ? "0" : "") + pokemon_ID;
  document.getElementById("id-number").innerHTML = displayText;
}
</script>

方式2：用事件监听绑定点击（推荐，更符合现代JS开发习惯） #

这种写法把HTML和JS逻辑分开，后期维护代码更清晰：

<div id="id-number"></div>
<a id="right-btn">点击增加ID</a>

<script>
var pokemon_ID = 1;
// 先获取DOM元素，避免重复查询
const rightBtn = document.getElementById("right-btn");
const idNumberDiv = document.getElementById("id-number");

// 初始化显示初始值
updateIDDisplay();

// 给按钮绑定点击事件
rightBtn.onclick = function() {
  pokemon_ID++;
  updateIDDisplay();
};

function updateIDDisplay() {
  var displayText = "no. " + (pokemon_ID < 10 ? "00" : pokemon_ID < 100 ? "0" : "") + pokemon_ID;
  idNumberDiv.innerHTML = displayText;
}
</script>

核心要点： #

• 页面的DOM元素不会自动跟着变量变化，必须在变量更新后手动调用代码去修改元素内容。
• 把更新显示的逻辑抽成单独函数，不管是初始化还是点击按钮后，都能直接调用，避免重复写相同代码。
• 我还帮你优化了数字补零的逻辑，这样不同位数的ID都能显示成你想要的格式啦～

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