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>You need to
innerTextvar 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>You need to fetch all divs. You can use for example this selector: document.querySelectorAll('[class^="block"]'); Then you can assign ervery div a click event.
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>if you want to change all span innerText then,
let spans = document.getElementsByClassName("txt");
spans.forEach(element => {
element.innerText = "Hello";
});