Foreach not works on html collection

Question

I have two files, one of js:

const a = document.getElementsByTagName("body")[0];

const d = a.getElementsByTagName("h1");

d.forEach(element => {
   element.innerHTML = "the text has changed";
});

and html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>David
</title>
  </head>
  <body>
    <h1>hello1</h1>
    <h2>david</h2>
    <h3>ariel</h3>
    <h4>yahav</h4>
    <h1>hello2</h1>
    <h1>hello3</h1>
    <script src="food.js"></script>
  </body>
</html>

I am trying to change the text of each h1 element to the same text, but it's not working, meaning when i run it on the broswer, all the "h1" texts remains the same.

not sure why, because "d" is an html collection, and i run on it with the foreach.

Basically everything stright forward, so not sure what i could try.

appreciate any help!

Welcome to Stack Overflow! Please post code, data, and results as text, not screenshots. http://idownvotedbecau.se/imageofcode — Barmar, Dec 08 '22 at 01:21
[HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) doesn't implement a `forEach` method. You'll need to use a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) loop, [convert it to an array](https://stackoverflow.com/questions/222841/most-efficient-way-to-convert-an-htmlcollection-to-an-array) first, or use a [query method that returns a NodeList](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — pilchard, Dec 08 '22 at 01:23
please remove the screenshots of text and add the text instead — jsotola, Dec 08 '22 at 01:24

Peter Konokhov · Answer 1 · 2022-12-08T01:46:04.313

0

you shouldn't use forEach because HTMLCollections don't implement a forEach method.

Use the for loop

const a = document.getElementsByTagName('body')[0]
const d = a.getElementsByTagName('h1')

for (let elem of d) {
    elem.innerHTML = 'new text'
}

edited Dec 08 '22 at 01:46

answered Dec 08 '22 at 01:26

Peter Konokhov

1
2

please vote to close either as duplicate or as not reproducable. `forEach` is also implemented by `NodeList`, `Set` and `Map` as well as `Array` with additional implementations for `DOMTokenList`, `KeyboardLayoutMap`, `Headers` etc... – pilchard Dec 08 '22 at 01:27
(also `console.log(typeof d)` is a meaningless check as everything in js is an object including arrays `console.log(typeof []); // "object"`) – pilchard Dec 08 '22 at 01:33
@pilchard Oh, sorry, you're right, I just wanted to help a person with a problem. I tried to explain why in this particular case it won't work. Do you think it would be correct to delete this answer ? – Peter Konokhov Dec 08 '22 at 01:36
It's a fine answer, but just correct 'because it's an array method' to 'because HTMLCollections don't implement a forEach method' to make it accurate at least. But in general basic questions like this are best redirected to the documentation, to the numerous duplicates that answer it, or closed as not reproducable. – pilchard Dec 08 '22 at 01:40
Yes, I think you're right. I'll be more careful next time! – Peter Konokhov Dec 08 '22 at 01:47
Answer is not right – Tyler Chong Dec 11 '22 at 12:00
I think you can try to play it to make sure it works – Peter Konokhov Dec 12 '22 at 13:11

Foreach not works on html collection

1 Answers1