CODEWITHSUNDEEP
javascriptinnerhtmlgetelementsbyclassname
Alessandra M
Alessandra M

Reputation: 3

Use innerHTML by class multiple times

I'm trying to insert content based on class however it only works once, how can I make it work multiple times?

See example: .innerHTML only runs once and not on the next occurrences

window.onload = function(){ 
document.getElementsByClassName("0")[0].innerHTML = `text0`;
document.getElementsByClassName("1")[0].innerHTML = `text1`;
document.getElementsByClassName("2")[0].innerHTML = `text2`;
document.getElementsByClassName("3")[0].innerHTML = `text3`;
}
<div class="x 0"></div>
<div class="x 1"></div>
<div class="x 2"></div>
<div class="x 3"></div>
<div class="x 0"></div>
<div class="x 1"></div>
<div class="x 2"></div>
<div class="x 3"></div>

Upvotes: 0

Views: 1215

Answers (2)

Zoldszemesostoros
Zoldszemesostoros

Reputation: 397

var elemList = document.getElementsByClassName("0");
for (let i = 0; i < elemList.length; i++) {
    elemList[i].innerHTML = "text0";
}

An do this with classes 1, 2, etc.

Upvotes: 0

user13432602
user13432602

Reputation: 

document.querySelectorAll('.x').forEach((element, i) => {
  element.innerText = `text${i}`
})

Upvotes: 3

Related Questions