Hola chicos, soy nuevo en JS y en la programación en general. Recién comencé a aprender y me preguntaba por curiosidad si hay alguna manera de recorrer el evento click eventListener. Entonces, cada vez que hago clic en mi encabezado h1 con una identificación de título, ¿el HTML interno cambia como una especie de reproducción aleatoria infinita?
const element = document.getElementById("title"); element.addEventListener("click", function(){ element.innerHTML = "Cool Right?"; element.addEventListener("click", function(){ element.innerHTML = "SoundPad"; }); });Cree una matriz con la cadena que le gustaría ciclar ( strings )
Cree un número entero en el que mantendremos el índice mostrado actual ( i )
Agregue un oyente de click en el que haremos lo siguiente:
0element.innerHTML en el índice de la matriz const element = document.getElementById("title"); const strings = [ 'Hello', 'How', 'Are', 'You', '?' ]; let i = 0; element.addEventListener("click", () => { if (i === strings.length) i = 0; element.innerHTML = strings[i]; i++; }); <h1 id='title'>Starting Title</h1>En lugar de las 3 líneas, podemos simplificar esto de muchas maneras:
Fancy one-liner usando la misma lógica que la anterior
element.addEventListener("click", () => element.innerHTML = strings[(i === (strings.length - 1)) ? (i = 0) : ++i]); Usando el operador de módulo ( % ) para establecer i
element.addEventListener("click", () => { i = (i + 1) % strings.length element.innerHTML = strings[i]; });