如何使用 JS 在 setInterval() 函数中切换 innerHTML

Posted 2023-02-18

【中文标题】如何使用 JS 在 setInterval() 函数中切换 innerHTML

【英文标题】：How can i toggle innerHTML inside a setInterval() function with JS

【发布时间】：2022-01-11 02:29:00

【问题描述】：

我正在尝试在 set Intervals 处替换 a 的 innerhtml。

亲爱的朋友们，

我是编码新手。我创建了一个带有图像的 div 和一个

元素（其中包括一个 .

我已经为 div 分配了两个类，我希望它以设定的时间间隔在两个类之间交替。 另外，我正在尝试通过使用 innerHTML 来切换跨度内的文本。

到目前为止，我已成功切换类，但无法使 innerHTML 正常工作。

我有以下代码：

   if(categProducts[idx].discount && categProducts[idx].low)
                      
   
                       var Interval = setInterval(
                       function changeClass()
                       document.getElementById('myDiv').classList.toggle("low");          
                       ,3000
                       )
   
                       var Interval2= setInterval(function changeText() 
                       var x=document.getElementById('mySpan').innerHTML
                          if (x==="<br> Only Few Cakes&nbsp;Left!!")
                           x.innerHTML="<br> Discount! Best Price!!"
                       
                       else 
                           x="<br> Only Few Cakes&nbsp;Left!!"
                       
                       console.log(x)
                   , 3000)
    
                    
                   

到目前为止，唯一的innerHTML切换了一次，然后就不再改变了。 我不能让它工作，我不明白为什么。

其余代码如下：

 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)
                myDiv.id="myDiv"
                const myP=document.createElement("p")
                myP.innerHTML=categProducts[idx].name
                myDiv.appendChild(myP)
                mySpan=document.createElement("span")
                myP.appendChild(mySpan)
                mySpan.id="mySpan"

【问题讨论】：

您将 x 定义为 document.getElementById('mySpan').innerHTML 但随后再次调用 x.innerHTML - 尝试将 x 定义为 document.getElementByID('mySpan') 然后 if(x.innerHTML===...

谢谢，你是对的。我改了，还是不行

【参考方案1】：

IMO，您应该在数组中定义所需的类和内容。适用于两人以上。

const changeContent = (() => 
  const classes = ['first-class', 'second-class'];
  const spanText = ['first text', 'second text'];
  let index = 0;
  return function() 
    document.getElementById('mySpan').innerHTML = "";
    document.getElementById('myDiv').classList = "";
    document.getElementById('mySpan').innerHTML = spanText[index];
    document.getElementById('myDiv').classList = classes[index];
    index++;
    if(index === classes.length) 
      index = 0;
    
  
)();

setInterval(changeContent, 3000);

这个函数使用闭包来定义全局变量。

【讨论】：

感谢您的迅速回复。我明白其中的逻辑。但是我试过了，但是在返回函数 ``` )( )```

的 3 个最终闭包时出现错误

对不起。最后缺少一个 。修改它。