Using "for" loops to add class names to all of one HTML element type


#1

I was watching the following video on YouTube:

I tried doing the same thing except with the <p> element, but it doesn’t work for me. The console does not show any errors, but no class names are added to the <p> elements when I run the code. And, yes, I am linking to the correct .js file, because I was playing around with some other things and it was working. What am I doing wrong?

Here is my JS and HTML:

JS

const para = document.getElementsByTagName("p");

for (i = 0; i < para.length; i++) {
    para[i].className = "paragraph-" + i;
}

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="test.js" type="text/javascript"></script>
</head>
<body>
    <p>Para 1</p>
    <p>Para 2</p>
    <p>Para 3</p>
    <p>Para 4</p>
    <p>Para 5</p>
</body>
</html>

#2

i put your code in a bin, and if i press run js, it works

the reason its not working is that there is no trigger for the code to do something

you could add a load eventlistener if you want the classes to be added when JS code is loaded


#3

I’m not sure what you mean when you say:

i put your code in a bin, and if i press run js, it works

I followed your link, but the results there are the same as when I open the HTML file in Chrome: no classes are added to the <p> elements in the HTML code after the script runs.

I’m also not sure what you mean by, “there is no trigger for the code to do something.”

I’m doing the exact same thing as you see in the video. So how come his code is working (i.e. you can see when he refreshes the page, classes are added to his <a> elements), but mine is not?


#4

jsbin shows the classes fine, we need to use the inspector to see it:

Screenshot_2017-11-04_23-49-36

given the result is added to the output page, not the html file we write the code in

Are you sure? So your setup (editor used and so on) is an exact match to the video? As we can see from jsbin, there the code is fired only when we press run javascript button

i should say it differently i guess, without a ready or load event, the JS code can execute before the DOM is loaded, which can make it seem like nothing happens

this seems to be what is currently happening, the js code is loaded first, attempting to retrieve not yet build paragraphs, which won’t work

we could overcome this by doing:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <p>Para 1</p>
    <p>Para 2</p>
    <p>Para 3</p>
    <p>Para 4</p>
    <p>Para 5</p>
</body>
    <script src="test.js" type="text/javascript"></script>
</html>

but ideally, we would want to code in javascript that the JS code doesn’t execute before DOM is ready, just to be sure

hm… right, i guess now i finally understand this xD I always added the load or made a click event, guess i am still learning as well :slight_smile:


#5

i should say it differently i guess, without a ready or load event, the JS code can execute before the DOM is loaded, which can make it seem like nothing happens

this seems to be what is currently happening, the js code is loaded first, attempting to retrieve not yet build paragraphs, which won’t work

AHH! That was it. If you look earlier in the linked video, indeed he has his script at the end of the <body>. I was focused on the characters in the code and overlooked the DOM structure. Makes perfect sense now. Thanks!


#6
const para = document.querySelectorAll('p');

para is a collection over which we can iterate with forEach. In the following I have written an arbitrary index that is pre incremented so the first number out is 1. To start with 0, post-increment with ${i++}.

para.forEach((p, i=0) => p.className = `paragraph-${++i}`);

#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.