Estoy tratando de alternar el HTML interno de un intervalo establecido.
Queridos amigos,
Soy nuevo en la codificación. Creé un div con una imagen y un elemento <p> (que incluye un <span>.
He asignado dos clases al div y quiero que alternen entre las 2 clases a intervalos establecidos. Además, estoy tratando de alternar el texto dentro del lapso, usando innerHTML.
Hasta ahora he logrado alternar la clase con éxito, pero no puedo hacer que el HTML interno funcione.
Tengo el siguiente código:
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 Left!!"){ x.innerHTML="<br> Discount! Best Price!!" } else { x="<br> Only Few Cakes Left!!" } console.log(x) }, 3000) }Hasta ahora, el HTML interno de the solo cambia una vez y luego no vuelve a cambiar. No puedo hacer que funcione y no entiendo por qué.
El resto del código es el siguiente:
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"En mi opinión, debe definir las clases y el contenido deseados dentro de las matrices. Funciona para dos y más.
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);Esta función utiliza cierres para definir variables globales.