¿Cómo cambio el contenido span
cuando se hace clic en un bloque div
usando JavaScript?
var tiles = document.querySelector(".block2"); tiles.addEventListener("click", function() { document.getElementsByClassName(".txt").innerHTML = "Hello"; });
<div class="block1"><span class="txt">1</span></div> <div class="block2"><span class="txt">2</span></div> <div class="block3"><span class="txt">3</span></div>
Necesitas
innerText
var tiles = document.querySelectorAll(".block1, .block2, .block3"); for (let tile of tiles) tile.addEventListener("click", function() { for (let span of tile.querySelectorAll(".txt")) span.innerHTML = "Hello"; });
<div class="block1"><span class="txt">1</span></div> <div class="block2"><span class="txt">2</span></div> <div class="block3"><span class="txt">3</span></div>
Necesitas buscar todos los divs. Puedes usar por ejemplo este selector: document.querySelectorAll('[class^="block"]');
Luego puede asignar a cada div un evento de clic.
const divs = document.querySelectorAll('[class^="block"]'); divs.forEach(d => { d.addEventListener("click", () => { d.firstChild.innerHTML = "Hello"; }); })
div { height: 20px; background: gray; padding: 5px; margin: 5px; width: 300px; }
<div class="block1"><span class="txt">1</span></div> <div class="block2"><span class="txt">2</span></div> <div class="block3"><span class="txt">3</span></div>
si desea cambiar todo span innerText entonces,
let spans = document.getElementsByClassName("txt"); spans.forEach(element => { element.innerText = "Hello"; });