Going nuts over this. The worst thing is I think I've done it before. Anyway, I want to somehow get to all elements with a certain class and do stuff to them.

First I tried a simple for loop. Didn't work. Then the google nightmare began. Somewhere it was suggested it must be done in reverse, from the last item to the first. Didnt' work either.

I've learnt that document.getElementsByClassName() doesn't return an array but a nodelist and the item() method was suggested. Didn't work either.
https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Here's a simple example that's of course isn't working.



Help!

In my understanding, a node list is a kind of array.


Sidenote: the SGML comments have not been needed for the last 15-20 years or so. The TYPE attribute is required by HTML4, but in HTML5 you can skip that too.


You can use the above or just


I don't know of any practical difference (I always use the shortest, of course).

What makes the script fail is that you forgot one closing curly bracket after the loop. Also, document.onload is not correct AFAIK. These should work:


but I don't recommend them either, since you can only use them once on a page. It's much better to use addEventListener, since you can use several of them on the same page. Here are two examples:


(not sure if the false flag is still needed?).

DOMContentLoaded fires when only the HTML code has loaded, while load fires when HTML and external files (images, CSS and JS) have loaded.

Linguistically maybe, but it can't be treated as a normal array in JS from what I understand.




I know that, believe it or not. It's the only way to make my editor use some kind of syntax highlighting. I didn't think I'd needed to clean it up for display.


But I can't! The normal for loop was where I started.



Oops! Copying error. It's there. Do you mean it actually runs for you with the closing brace there? Did you try it?



It seems it is kosher again. Supposedly window and document onload fire at different points of loading.

And... that was it after all. Changing to window.onload made the trick. What a read about firing at different points made me think document.onload would be better. Maybe I confused things.

The below, where it all started, does not run though. But that's according to what the sites I read says, so that's fine.


Thanks. I'll get back to the read real thing and see if it works there too.

Of course:




Now I found something like that on Stackoverflow, but it doesn't work in my browsers. An inline event like


does work of course.


That should be

I'm not sure document.onload works or not. But, if it does you still placed the command before the HTML was rendered. So, idiots will always be empty.

That would be correct with something like:


But the very purpose of the onload event if to create a delay until the page is loaded, that's why my example in my previous post works.

Yes, that's true. That's what I get for posting too soon after getting up.

No, I also had onload. I think yours work because you used addEventListener and not onclick as I did. Because mine doesn't work with idiots[i].style.color = 'red';.

Anyhow, I got what I was doing to work after much brooding. It was easier once this was solved. And I learnt few new things I need to read up about. Like 'item' and 'event' used like so: onclick="aFunction(event)". I don't like using things I'm not familiar with.

That was document.onload, which doesn't work. document.body.onload or window.onload work, though:


(BTW you don't have to put the JS in the HEAD section).


I don't understand things like "event" or "e" very well either, and tutorials I've found rarely make much sense.

I changed that as you may recall.



Hadn't even heard about them before.

Yes but then you introduced these typos:





https://quirksmode.org/js/introevents.html and http://quirksmode.org/js/events_access.html mention it (though much of the content deals with older browser, that are not an issue anymore). Please let us know if you find some better tutorials.