Hola, estoy tratando de entender y aprender Javascript. Tuve el desafío de descubrir cómo alertar el contenido de cada clic individual. Usando un bucle.
Así que comencé a rascarme la cabeza y probar múltiples enfoques. Logré alertar sobre el contenido, pero desafortunadamente sin un evento de clic.
function raport() document.querySelectorAll(".fake").forEach(div=>{ text+=div.textContent; }); alert(text); }Usó un selector de consulta para buscar el nombre de la clase .fake seguido de div=>text.div.textcontent haciendo que el texto variable = al contenido del div. Al cargar la página, el navegador alerta con éxito el contenido div como se ve en la página html.
PERO cuando trato de usar un evento onclick para activar el bucle al hacer clic en un botón...
No pasa nada..
Pensé en agregar un botón con una identificación específica combinada con el código:
document.getElementById('demo').onclick = function() {raport()}El botón HTML:
<button id= "demo" onclick="raport()">Klik</button>Como un medio para hacerlo, pero no recibo ningún error ni alertas con el contenido.
También supongo que esta no es la forma más productiva de lograr el desafío. Como se supone que debo alertar a cada individuo, lo que significa que tendría que copiar el código con identificadores de botón únicos y clases div para obtener los resultados correctos.
¿Algún consejo sobre cómo podría hacer funcionar el evento de clic?
¡Cualquier ayuda sería muy apreciada!
Siempre sugiero delegación si desea hacer clic en cada "falso"
Y un mapa si quieres obtener una lista de cosas
window.addEventListener("load", function() { // when the page loads const res = document.getElementById("res"); const fakes = document.querySelectorAll("#demo .fake"); document.getElementById("demo").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("fake")) { res.textContent = tgt.textContent; } }); document.getElementById("klik").addEventListener("click", function() { res.innerHTML = [...fakes] // cast the html collection to an array .map(fake => fake.textContent) // map the content .join(","); }) }); <div id="demo"> <div class='fake'>Hello</div> <div class='fake'>Man</div> </div> <button type="button" id="klik">Klik</button> <hr/> <div id="res"></div>Solo como una demostración, luego cierre la pregunta, es un error tipográfico:
let text =''; function raport() { text = ''; // add this if you want clean variable everytime click, or just declare into function the variable document.querySelectorAll(".fake").forEach(div => { text += div.textContent; }); alert(text); } document.getElementById('demo').onclick = function() { raport() } <button id="demo" onclick="raport()">Klik</button> <div class='fake'>Hello</div> <div class='fake'>Man</div>Ejemplo de tu comentario:
document.querySelectorAll('.fake').forEach(el =>{ el.addEventListener('click', () =>{ alert(el.textContent); }); }); <div class='fake'>Hello</div> <div class='fake'>Man</div> <div class='fake'>test2</div>