点击计算器其他按钮时复制按钮消失的问题求助

嘿，我来帮你搞定这个问题！你遇到的复制按钮消失的原因其实很直白：当你点击数字或者运算符按钮时，你用calculation.innerHTML = <h1>${calcString}</h1>直接把整个calculation容器里的内容全替换掉了，而你的复制按钮原本就放在这个容器里，所以每次点击这些按钮，复制按钮就被新的HTML代码覆盖没了。

给你两个解决方案，优先选第一个，更稳妥高效：

方案一：只更新计算文本，不替换整个容器内容 #

你完全不需要替换整个calculation的innerHTML，只需要精准更新里面的calculation-text元素的内容就好，这样复制按钮会一直留在容器里，不会被影响。

修改你JS代码里处理数字/运算符按钮的else分支：

} else {
    calcString += value;
    // 找到calculation-text元素，只更新它的文本内容
    document.querySelector(".calculation-text").textContent = calcString;
    display.textContent = value;
}

这样修改后，点击数字或运算符按钮时，只会更新计算文本，复制按钮会一直乖乖待在原来的位置，再也不会消失啦。

方案二（不推荐）：替换innerHTML时带上复制按钮 #

如果你一定要用innerHTML来更新内容，那每次设置的时候要把复制按钮也一起写进去，但这个方法有个小坑：每次重新生成按钮后，原来绑定的点击事件会失效，需要重新绑定或者用事件委托。

修改后的else分支示例：

} else {
    calcString += value;
    // 把复制按钮也包含在innerHTML里
    calculation.innerHTML = `<h1 class="calculation-text">${calcString}</h1><button class="copy" id="copy">Copy</button>`;
    display.textContent = value;
    // 重新绑定复制按钮的点击事件
    document.getElementById("copy").addEventListener("click", () => {
        if (result !== null && result !== "Error") {
            navigator.clipboard.writeText(result)
                .then(() => {
                    alert("Result copied to clipboard");
                })
                .catch((err) => {
                    console.error("Error copying to clipboard: ", err);
                });
        } else {
            alert("Nothing to copy");
        }
    });
}

不过这个方法比较繁琐，还可能出现重复绑定事件导致多次触发的问题，所以还是优先选方案一哦。

另外提个小提醒：eval函数尽量少用，因为如果输入恶意内容会有安全风险，不过你作为新手练习计算器的话暂时没问题，后续可以考虑自己实现简单的表达式解析逻辑~

备注：内容来源于stack exchange，提问作者viper