Question

0

89

Views

how to change span content within a div

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>

7 months ago · Santiago Gelvez

3 answers

Answer question

0

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>

7 months ago · Santiago Gelvez Report

0

if you want to change all span innerText then,

let spans = document.getElementsByClassName("txt");

spans.forEach(element => {
  element.innerText = "Hello";
});

7 months ago · Santiago Gelvez Report

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T23:46:03.901Z

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>