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

Question

I am trying to alternate the innerHTML of a at set Intervals.

Dear friends,

I am new to coding. I have created a div with an image, and a < p > element (that includes a < span >.

I have assigned two classes to the div, and I want it to alternate between the 2 classes at set intervals. In addittion, I am trying to toggle the text inside the span, by using innerHTML.

So far I have managed succesfully to toggle the class, but I can't make the innerHTML to work.

I have the following code:

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

So far, the innerHTML of the only toggles once, and then it doesn't change again. I can't make it work and I don't understand why.

The rest of the code is the following:

 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, you should define your desired classes and content inside arrays. Works for two, and more.

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

This functions uses closures to define global variables.