如何重置textPlacement.innerHTML？点击按钮时覆盖而非追加内容

问题根源 #

你当前代码里的textPlacement.innerHTML += ""完全是无效操作，根本没法清除之前的颜色文本。每次点击按钮执行代码时，都是直接在原有内容后面追加新的颜色字符串，自然会出现旧值和新值叠在一起的情况。

修复方案 #

要保留Background Colour : 这段固定文本，同时每次点击只显示最新的颜色，只需要在判断颜色之前，先把元素的内容重置为这个固定前缀，再添加对应的颜色值即可：

• 删掉没用的textPlacement.innerHTML += ""
• 在颜色判断逻辑前，先设置textPlacement.innerHTML = "Background Colour : "
• 之后正常追加对应颜色文本

修改后的完整代码 #

JavaScript代码

// 补上按钮点击事件监听，确保点击触发逻辑
document.querySelector('.button').addEventListener('click', function() {
  let textPlacement = document.getElementById("insert-colour");
  let simpBackgroundColour = (Math.floor(Math.random() * 3)) + 1;

  // 先重置为固定前缀文本
  textPlacement.innerHTML = "Background Colour : ";

  if (simpBackgroundColour === 1) {
    document.body.style.background = "#eb1e17";
    textPlacement.innerHTML += "Red";
  } else if (simpBackgroundColour === 2) {
    document.body.style.background = "#2390de";
    textPlacement.innerHTML += "Blue";
  } else {
    document.body.style.background = "#d9d923";
    textPlacement.innerHTML += "Yellow";
  }
});

HTML代码

<h class="background-colour-box" id="insert-colour">Background Colour : </h>
<div class="button">Click Me</div>

额外说明 #

原代码缺少按钮的点击事件监听，上面的修复代码已经补上了，这样点击按钮才会触发颜色切换和文本更新逻辑，不然代码只会在页面加载时执行一次。

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