如何使用 JS 在 setInterval() 函數中切換innerHTML

安妮塔天使

我正在嘗試以設置的間隔交替 a 的innerHTML。

親愛的朋友們,

我是編碼新手。我創建了一個帶有圖像的 div 和一個 <p> 元素(包括一個 <span>。

我已經為 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"
悲傷的背景音樂

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

這個函數使用閉包來定義全局變量。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章