<!DOCTYPE html>
<html style="background-color: #D1D1D1 ">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./main.css" />
</head>
<body id="body">
<h1 id="headerTitle"></h1>
<div>
<p id="header">November 29th</p>
</div>
<div>
<p id="header">November 29th</p>
</div>
<div>
<p id="header">November 29th</p>
</div>
<script src="./main.js"></script>
</body>
</html>
I'm trying to loop through the body and get into each div and change the November 29th text. The closest i've gotten is with this:
var body = document.getElementsByTagName("div")
for (i = 0; i < body.length; i++) {
document.getElementById("header").innerHTML = "Hello World!";
}
but it only changes the first div and stops.
It is only changing the first div since an id is only supposed to belong to one element so it stops after it finds that element. Change the id field on the p tags to class and you could use
let body = document.getElementsByClassName()
for (let element of body) {
element.innerHTML = "..."
}
As already mentioned, you shouldn't have more than 1 element with the same id. Changing the ids to class, this code should work:
[...document.querySelectorAll('.header')].map((elem) => elem.textContent = 'Hello World!');
//Just to change the data in the div's u can do this
var div_s = document.getElementsByTagName("div")
for (i = 0; i < div_s.length; i++) {
div_s[i].innerHTML = "Hello World!";
}
OR to change the data in p's u need unique id's for each tag such as given below.
<div title = "header1">
<p id="header1">November 29th</p>
</div>
<div title = "header2">
<p id="header2">November 29th</p>
</div>
<div title="header3">
<p id="header3">November 29th</p>
</div>
<script>
var divs = document.getElementsByTagName('div')
for (i = 0; i < divs.length; i++) {
document.getElementById(divs[i].title).innerHTML = "Hello World!";
}
</script>