Блог

Я пытаюсь чередовать внутренний текст a с заданными интервалами.

Дорогие друзья,

Я новичок в кодировании. Я создал div с изображением и элементом lt; p gt; (который включает в себя lt; p gt;lt; span gt;.

Я назначил div два класса, и я хочу, чтобы он чередовался между 2 классами с заданными интервалами. В дополнение я пытаюсь переключить текст внутри промежутка, используя innerHTML.

До сих пор мне удавалось успешно переключать класс, но я не могу заставить innerHTML работать.

У меня есть следующий код:

   if(categProducts[idx].discount amp;amp; 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==="lt;brgt; Only Few Cakesamp;nbsp;Left!!"){  x.innerHTML="lt;brgt; Discount! Best Price!!"  }  else {  x="lt;brgt; Only Few Cakesamp;nbsp;Left!!"  }  console.log(x)  }, 3000)      }  

До сих пор внутренний текст только один раз переключается, а затем снова не меняется. Я не могу заставить это работать, и я не понимаю, почему.

Остальная часть кода выглядит следующим образом:

 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"  

ИМО, вы должны определить желаемые классы и содержимое внутри массивов. Работает на двоих и больше.

 const changeContent = (() =gt; {  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);  

Эти функции используют замыкания для определения глобальных переменных.