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

Question

我正在尝试按设定的时间间隔替换 a 的 innerHTML。

亲爱的朋友们，

我是编码新手。我创建了一个带有图像的 div 和一个 < p > 元素（包括一个 < span >.

我已将两个 classes 分配给 div，我希望它以设定的时间间隔在 2 个 classes 之间交替。此外，我正在尝试使用 innerHTML 在跨度内切换文本。

到目前为止，我已成功切换 class，但我无法使 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"

Answer 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);

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

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

How can i toggle innerHTML inside a setInterval() function with JS

javascript

innerhtml

toggle

setinterval