How do I change the span content when a div block is clicked using 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>>Solution :
You need to
- get all blocks
- loop them
- add a click to each
- get the inner spans of the current block
- loop them
- change the
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>