 document.getElementsByClassName() - how to iterate |
| pandy |
 Sep 6 2020, 03:50 PM
Post
#1
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6  |
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.  HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Not worth it</title> <script type="text/javascript"> <!-- function blah() { var idiots = document.getElementsByClassName("dumb"); for (var i = 0; i < idiots.length; i++) { idiots.item(i).style.color = 'red'; } document.onload = blah; //--> </script> </head> <body> <p> This is...<span class="dumb">dumb!</span></p> <p> This is...<span class="dumb">dumb!</span></p> <p> This is...<span class="dumb">dumb!</span></p> </body> </html> Help!  |
  |
 
|
  |
Replies
| CharlesEF |
Sep 6 2020, 05:34 PM
Post
#2
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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.
|
|
|
|
| Christian J |
Sep 6 2020, 06:51 PM
Post
#3
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(CharlesEF @ Sep 7 2020, 12:34 AM)  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: CODE <script type="text/javascript"> function blah() { var idiots = document.getElementsByClassName("dumb"); for (var i = 0; i < idiots.length; i++) { idiots[i].style.color = 'red'; } } blah(); // no onload is used! </script> 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. |
|
|
|
| pandy |
Sep 6 2020, 08:37 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
QUOTE(Christian J @ Sep 7 2020, 01:51 AM) 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. 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.  |
|
|
|
| Christian J |
Sep 7 2020, 07:37 AM
Post
#5
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Sep 7 2020, 03:37 AM) No, I also had onload. That was document.onload, which doesn't work. document.body.onload or window.onload work, though: CODE function blah() { var idiots = document.getElementsByClassName("dumb"); for (var i = 0; i < idiots.length; i++) { idiots[i].style.color = 'red'; } } document.body.onload=blah; (BTW you don't have to put the JS in the HEAD section). QUOTE onclick="aFunction(event)". I don't like using things I'm not familiar with. I don't understand things like "event" or "e" very well either, and tutorials I've found rarely make much sense. |
|
|
|
| pandy |
Sep 7 2020, 08:31 AM
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
QUOTE(Christian J @ Sep 7 2020, 02:37 PM) That was document.onload, which doesn't work. document.body.onload or window.onload work, though: I changed that as you may recall. QUOTE I don't understand things like "event" or "e" very well either, and tutorials I've found rarely make much sense. Hadn't even heard about them before. |
|
|
|
| Christian J |
Sep 7 2020, 10:17 AM
Post
#7
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Sep 7 2020, 03:31 PM) I changed that as you may recall. Yes but then you introduced these typos: CODE idiots.[i],style.color = 'red';  QUOTE Hadn't even heard about them before. 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. |
|
|
|
Posts in this topic
pandy document.getElementsByClassName() - how to iterate Sep 6 2020, 03:50 PM
Christian J
I've learnt that document.getElementsByClassN... Sep 6 2020, 04:46 PM
pandy
In my understanding, a node list is a kind of arr... Sep 6 2020, 04:59 PM Christian J
Did you try it? :blink:
Of course:
function ... Sep 6 2020, 05:18 PM CharlesEF Yes, that's true. That's what I get for p... Sep 6 2020, 07:47 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 10:36 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC