如何在JavaScript的setInterval函数中切换元素的innerHTML

核心问题点 #

• 重复ID错误
  你在循环创建多个蛋糕商品节点时，给所有div都设置了myDiv的id、所有span都设置了mySpan的id。HTML中id必须全局唯一，document.getElementById永远只会匹配到页面上第一个对应id的元素，后续创建的商品节点根本不会被选中。
• innerHTML赋值逻辑错误
  你先把x赋值为span的innerHTML字符串，之后试图给x.innerHTML赋值是完全无效的——x是字符串类型，根本没有innerHTML属性，只有DOM元素对象才有这个属性。你的代码第一次执行时仅修改了字符串变量x的值，没有实际修改DOM节点的内容，所以页面内容只会停留在初始状态。
• 定时器不同步&冗余
  你开了两个间隔都是3秒的定时器，触发时间可能存在偏移，导致类名和文本切换不同步，完全可以合并成一个定时器。

修复后完整代码 #

for (let idx in categProducts){
  if (categProducts[idx].category==="cakes") {
    const parentElement=document.getElementById("divCakes")
    const myDiv=document.createElement("div")               
    parentElement.appendChild(myDiv)
    myDiv.className="product"
    const myImg=document.createElement("img")
    myImg.src=categProducts[idx].imageURI
    myImg.alt=categProducts[idx].alt
    myDiv.appendChild(myImg)
    const myP=document.createElement("p")
    myP.innerHTML=categProducts[idx].name
    myDiv.appendChild(myP)
    const mySpan=document.createElement("span")
    myP.appendChild(mySpan)

    // 定时器逻辑直接写在循环内，引用当前创建的节点变量，不需要查询DOM
    if(categProducts[idx].discount && categProducts[idx].low){
      // 初始化span默认内容
      mySpan.innerHTML = "<br> Only Few Cakes&nbsp;Left!!"
      // 合并为一个定时器，同步切换类名和文本
      setInterval(function(){
        myDiv.classList.toggle("low")
        if(mySpan.innerHTML === "<br> Only Few Cakes&nbsp;Left!!"){
          mySpan.innerHTML = "<br> Discount! Best Price!!"
        } else {
          mySpan.innerHTML = "<br> Only Few Cakes&nbsp;Left!!"
        }
      },3000)
    }
  }
}

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