JavaScript Tutorial For Beginners 19 - Practical Example using Loops

Hey gang, in this JavaScript tutorial I just wanted to show you a quick practical example of using loops to change elements on a HTML page. In this example, we'll create an array of all the anchor tags on our HTML document, cycle through them using a for loop, and then add a dynamic class name to them dependant on their position in the page/array.

As always, fire away with any questions you have ninjas :).

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[Martin]

So by setting i = 0 this time instead of i = 1, you did not need to do i <= links.length ? Last time it needed <= instead of just < .

[alejandrohernandez]

I have 30 hours of experience on coding and i picked everything up from what you explained.

[tomasmatusek]

waw, how easy we can get this a link classes, waaaw, thanks so much.I start be your fallower, thanks alot.Im realy happy meet ur channel bro, even if its old vidio, but waw.

[LoreCraftForge]

I’ve been learning JS through Udemy for about 4 days now. I did an HTML and CSS course last month, and my favorite part, is I understood everything you coded here. Thank you for this this was great!

[thundraj]

I see that the links have been assigned a class name. So does that mean that the HTML file will be updated with the class name ? Can I use that class name inside my CSS styling ?

[RoshanShresthaOff]

Need to upload zooming. I bearly see it.

[pawpaaj]

Hey! Great videos and well explained! I just have a little question. Is there a possibility to check if an element has 2 specific attributes? For example I want to check if an element is an anchor (a attribute) and has specific class, for example class="link". If so, store this element (or more elements if more than one can be found) in a variable.

[YaserBasravi]

I have a question

The aim of this demo was to assign "class" to all links. Instead of doing it in HTML we used JAVA-SCRIPT to assign class to all links.

Right??

correct me if i am wrong...

[matheusfso]

Does that work by using divs with same classes?

I tried using:

<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>

The results are:

<div class="post-0">Post 1</div>
<div class="post">Post 2</div>
<div class="post-1">Post 3</div>

It skips one div each time.

I tried using lists and it worked!

TUSM!!!

[seansgonewrong]

can I use a loop to download images from a webpage. for example, if i ooened the console and created a loop can i have that loop target all of the image elements on that page and download them to my desktop?

[omikronweapon]

Net Ninja: I don't always pronounce the H in words, but when I do...

[cryptooten]

Ivan brought me here. Thanks for sharing your video it's very helpful.

[zeroxcrusher]

I just don't understand why would we wanna use that. Why not just change style properties with CSS?

[deepakkumarmohanty]

links[i].className = "link-" + i;
why this line shows error saying 'cannot set className' of undefined..
please help me fast n correct me if I'm doing something wrong

[digitalnomad]

Instead of I++ can you do I+2? Si it increases by 2 each loop? Or i also saw i=i+2

[christenclark]

link- means. link plus space plus number? Do I have hyphen correct?

[AleksaCar-bkrx]

i<links.length
How does "i" know how many links are on the page?

[BadassItalianJew]

why is this one trashed...i needed this

[jetspray]

The teaching was good but the screen was small next time please consider zooming in.

[andreiradufrandes]

it doesnt work for me. You should attach a file with the code to your video