如何将多个按钮的点击值拼接为单个字符串

嘿，我完全懂你的困扰！你现在的代码每次点击按钮都会把inputvalue直接替换成当前按钮的值，所以只能得到单个字符。要实现连续点击累积成类似aba这样的字符串，只需要做几个小改动就可以啦，同时也能实现终止输入的功能。

核心修改点 #

• 将赋值改为追加：把inputvalue = button.value;改成inputvalue += button.value;，这样每次点击都会把新字符加到现有字符串的末尾，而不是覆盖掉之前的内容。
• 添加输入控制开关：增加一个变量来控制是否允许继续输入，点击终止按钮时就关闭这个开关，避免后续点击继续累积字符。

修改后的完整代码 #

HTML部分

<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>

JavaScript部分

let inputvalue = "";
let isInputAllowed = true; // 控制是否允许输入的开关

function buttoninput(button) {
    // 只有在允许输入的状态下才执行累积操作
    if (isInputAllowed) {
        inputvalue += button.value; // 追加字符而不是替换
        console.log(inputvalue);
    } else {
        console.log("输入已终止，无法继续添加字符");
    }
}

function stopInput() {
    isInputAllowed = false; // 关闭输入开关
    console.log("输入已终止，当前累积的字符串为：" + inputvalue);
}

代码解释 #

1. 累积字符：使用+=运算符，每次点击按钮都会把按钮的value值追加到inputvalue变量的末尾，比如第一次点a得到a，再点b得到ab，再点a就得到aba啦。
2. 终止输入功能：isInputAllowed变量默认是true，允许输入；点击终止按钮时调用stopInput()函数，把这个变量设为false，之后再点击字母按钮就不会再累积字符了，还会在控制台提示输入已终止。

这样就能完美实现你想要的连续点击累积字符串，并且可以随时终止输入的需求啦！

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