使用setInterval结合innerHTML切换文本失效问题求助

你的代码核心问题是没有真正修改DOM元素的innerHTML：

• 你把document.querySelector("#one").innerHTML的值赋给了变量word，之后修改word = sentence只是改变了这个变量的内容，并没有同步到页面的DOM元素上。
• 使用document.write时，页面加载完成后调用它会持续追加内容（甚至重写整个文档），这不是修改指定元素内容的正确方式。

修改后的完整代码 #

HTML（无需改动）

<button id="start">Start</button>
<button id="stop">Stop</button>

<p id="one">Hello</p>

JavaScript

let interval;
// 保存DOM元素引用，而不是innerHTML的值
let pElement;
// 用专门的状态变量控制文本切换，比复用color更清晰
let isShowingHey = false;

function startTogglingText() {
  // 先清除已有定时器，防止重复点击Start触发多个定时器
  clearInterval(interval);
  // 获取目标p元素的引用
  pElement = document.querySelector("#one");
  
  interval = setInterval(function() {
    if (isShowingHey) {
      pElement.innerHTML = "You!";
    } else {
      pElement.innerHTML = "Hey";
    }
    // 切换状态
    isShowingHey = !isShowingHey;
  }, 1500);
}

function stopTogglingText() {
  clearInterval(interval);
}

window.addEventListener('load', function() {
  const btnStart = document.getElementById('start');
  const btnStop = document.getElementById('stop');

  btnStart.addEventListener('click', startTogglingText);
  btnStop.addEventListener('click', stopTogglingText);
});

关键修改点 #

• 保存DOM元素引用：直接获取<p id="one">元素本身，而不是它的innerHTML值，这样后续修改pElement.innerHTML才能直接更新页面内容。
• 新增状态变量：用isShowingHey专门控制文本切换逻辑，避免复用原本用于背景色的color变量，代码更清晰。
• 防止重复定时器：在startTogglingText开头先执行clearInterval(interval)，避免多次点击Start按钮导致多个定时器同时运行，出现文本切换混乱的问题。
• 弃用document.write：永远不要用document.write来修改页面局部内容，它的设计用途是在页面加载过程中写入初始内容，加载完成后使用会破坏整个页面结构。

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