entonces quiero hacer que JS funcione, que agregue una cadena aleatoria de mi matriz a HTML, luego elimínelo y agregue otro en su lugar. Mi código ahora hace todo lo que quiero, simplemente no elimina el elemento pasado y agrega otro en su lugar.
En otras palabras, solo quiero una diapositiva de texto simple.
MI HTML:
<section style="height: 100vh;" class=""> <div class="container pt-2 pb-2"> <div class="row"> <div class="col d-flex justify-content-center text-uppercase"> <div> <h1> Mes teikiame </h1> <div class="scroller"> <span> </span> </div> <h1> Paslaugas </h1> </div> </div> </div> </div> </section>MI JS:
// Selecting elements let scrollerSpan = document.querySelector('.scroller > span') // Creating elements let textInsideScroller = document.createElement('span') // Class add textInsideScroller.classList.add('text-inside-scroller') // Function generating service name in random order for scroller const dynamicServiceNames = () => { const serviceNames = ['example1', 'example2', 'example3', 'example4', 'example5', 'example6', 'example7']; const randomName = serviceNames[rand(0, serviceNames.length)]; textInsideScroller.append(randomName) scrollerSpan.append(textInsideScroller) }; // Executing my function let i = 1; setInterval(function() { dynamicServiceNames(i++); }, 1000)ACTUALIZACIÓN: Intenté resolver este problema agregando esto a la función:
// Function generating service name in random order for scroller const dynamicServiceNames = () => { const serviceNames = ['grožio', 'voljerų gaminimo', 'apskaitos priežiūros', 'kasinėjimo', 'metinių ataskaitų teikimo', 'deklaracijų ruošimo', 'barščių virimo']; const randomName = serviceNames[rand(0, serviceNames.length)]; textInsideScroller.append(randomName) if (scrollerSpan.contains(textInsideScroller)){ scrollerSpan.remove(textInsideScroller) } else{ scrollerSpan.append(textInsideScroller) } };Pero esto no ayudó. Ahora la cadena aleatoria proviene de la matriz, pero solo una vez: necesito actualizar la página para obtener otra cadena aleatoria...
Simplemente podría actualizar la propiedad innerHTML de scrollerSpan con randomName. Además, actualicé la función rand con Math.random para probar esto.
// Selecting elements let scrollerSpan = document.querySelector('.scroller > span') // Function generating service name in random order for scroller const dynamicServiceNames = () => { console.log('inside function') const serviceNames = ['example1', 'example2', 'example3', 'example4', 'example5', 'example6', 'example7']; const randomName = serviceNames[Math.floor(Math.random()*serviceNames.length)]; scrollerSpan.innerHTML= `<span>${randomName}</span`; }; // Executing my function let i = 1; setInterval(function() { console.log('in function') dynamicServiceNames(i++); }, 1000)splice podría ser lo que estás buscando:
const array = [1, 2, 3]; array.splice(1, 1, 5); // from index 1, remove 1 element, insert 5 console.log(array); // [1, 5, 3];