I'm trying to cut down on my verbose classList.add('lorem') calls. I can easily add the same class to multiple created elements like so:
const loremDiv = document.createElement('div'), ipsumDiv = document.createElement('div')
loremDiv.classList.add('hi')
ipsumDiv.classList.add('hi')
But when I try to add the class via a single forEach like so:
[loremDiv,ipsumDiv].forEach((el) => {
el.classList.add('hi')
}
I get the following error: TypeError: Cannot read properties of undefined (reading 'forEach')
As others have mentioned, you are missing vital semi-colons. Both Felix and Pointy make valid points. There is really no need to omit semi-colons. It may look more hip and modern, but it will bite you down the road and cause cryptic errors like this.
The document.createElement call returns an element, but since you did not include a semi-colon, it runs into the next line like so:
document.createElement('div')[loremDiv, ipsumDiv]
Since you did not terminate the ipsumDiv assignment, the interpreter is complaining that it was not assigned already.
As for the forEach((el) => el.classList.add('hi')) call, Array.prototype.forEach returns nothing, so you are calling loremDiv on an undefined object.
forEach((el) => el.classList.add('hi'))[loremDiv, ipsumDiv]
const
loremDiv = document.createElement('div'),
ipsumDiv = document.createElement('div') // Missing semi-colon!
// "Uncaught ReferenceError: Cannot access 'ipsumDiv' before initialization"
[loremDiv, ipsumDiv].forEach((el) => el.classList.add('hi')) // Missing semi-colon!
// "Uncaught TypeError: Cannot read properties of undefined (reading '#<HTMLDivElement>')"
[loremDiv, ipsumDiv].forEach((el) => document.body.append(el)) // Optional semi-colon.hi:before { content: "HI!" }const
loremDiv = document.createElement('div'),
ipsumDiv = document.createElement('div'); // Semi-colon required
[loremDiv, ipsumDiv].forEach((el) => el.classList.add('hi')); // Semi-colon required
[loremDiv, ipsumDiv].forEach((el) => document.body.append(el)); // Why not add one?.hi:before { content: "HI!" }