如何用 JavaScript 将多次点击的按钮值拼接成一个字符串？

2026-11-04数据小陈

将 inputvalue = button.value 改成 inputvalue += button.value，就可以按点击顺序保留字符。例如，依次点击 a、b、a，结果是 "aba"。

为什么只能得到一个字符？

原来的语句每次都会覆盖之前保存的内容：

inputvalue = button.value;

+= 会把新值追加到已有字符串的末尾。这里的写法等价于：

inputvalue = inputvalue + button.value;

最小修改

保留现有的三个字符按钮，将函数改成：

let inputvalue = "";

function buttoninput(button) {
  inputvalue += button.value;
  console.log(inputvalue);
}

按 a、b、a 的顺序点击，控制台会依次输出：

a
ab
aba

inputvalue 需要在函数外初始化。如果在函数内部每次都执行 let inputvalue = ""，每次点击都会从头开始收集。

如何用 stop 按钮结束输入？

如果希望点击 stop 后保留当前结果，并忽略后续字符按钮的点击，可以增加一个状态变量：

<button value="a" type="button" onclick="buttoninput(this)"> a </button>
<button value="b" type="button" onclick="buttoninput(this)"> b </button>
<button value="c" type="button" onclick="buttoninput(this)"> c </button>
<button value="stop" type="button" onclick="stopinput()">结束输入</button>

<script>
  let inputvalue = "";
  let stopped = false;

  function buttoninput(button) {
    if (stopped) {
      return;
    }

    inputvalue += button.value;
    console.log(inputvalue);
  }

  function stopinput() {
    stopped = true;
    console.log("最终输入：", inputvalue);
  }
</script>

原来的 stop 按钮只有 value="stop"，没有绑定点击处理函数，因此不会自动结束收集。上面的代码为它绑定了 stopinput()，也不会把 "stop" 拼进结果。

所有按钮都显式设置了 type="button"，放进 <form> 时就不会因默认提交行为影响输入。如果之后需要开始新一轮输入，将 inputvalue 清空，并把 stopped 设回 false 即可。