点击按钮为何显示0而非1？（JavaScript+HTML）

你的代码执行顺序搞反了——每次点击按钮时，先把当前的i值赋给输入框，再执行i++，具体流程是：

1. 初始状态i=0
2. 首次点击按钮，执行textbox.value = i，输入框直接显示0
3. 执行i++，i的值才变成1

这就是为什么第一次点击显示0，而不是你预期的1。

有两种简单的修正方式，按需选择：

方式1：先递增再赋值 #

把i++移到赋值操作前面，或者直接用前置递增运算符：

var i = 0;
function increment() {
  var textbox = document.getElementById("inc");
  i++; // 先把i的值加1
  textbox.value = i; // 再把更新后的i赋值给输入框
  // 也可以合并成一行：textbox.value = ++i;
}

首次点击时，i先从0变成1，再赋值给输入框，就能直接显示1。

方式2：赋值时直接计算目标值 #

如果不想调整i的递增时机，也可以在赋值时直接用i+1，再同步更新i：

var i = 0;
function increment() {
  var textbox = document.getElementById("inc");
  textbox.value = i + 1; // 直接显示当前i加1的结果
  i++; // 更新i为下一次要用的值
}

这种方式首次点击输入框会显示0+1=1，之后i变成1，第二次点击显示1+1=2，效果和方式1一致。

如果输入框可能被用户手动修改，建议直接基于输入框的当前值递增，不用全局变量i，避免出现非数字异常：

function increment() {
  var textbox = document.getElementById("inc");
  // 把输入框的值转成数字，空值或非数字默认按0处理
  var currentVal = parseInt(textbox.value) || 0;
  currentVal++;
  textbox.value = currentVal;
}

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