✅ For Loops | Using For Loops to Dynamically Display HTML Elements on the Page

In this lecture, you will learn how to use For Loops to dynamically display HTML elements on the page with an easy-to-follow, simple and practical coding example!

👉 If you want to learn more about JavaScript Loops from the official documentation, make sure to check out this link:

👉 Link for the course folder:

[yourdadishere]

I was a teacher for some years, and a personal trainer before that--and eventually moved on to training teachers. You explain this so clearly and concisely. A real pleasure to see.

[WewCode]

I was currently making a pokedex project and wanted to output some html everytime a new pokemon was fetched from the api and this worked perfectly i was stuck on this for like 4 hours man thank you so much! lol

[prasad]

That's the best and simple practicle example 👏

[kanansamandarli]

helped me a lot with my project. Thanks

[marandambuelo]

Exactly what I've been looking for😌 thanks a lot man

[jamespaulchibole]

Thank you for the video. It was extremely helpful. What modification do you need to make in JavaScript so that the element <main></main> repeats itself. In other words, you want to ensure that each number is displayed in its own <main></main> section.

[fullstackdev]

more tutorials man! great explanation. thanks a lot!

[kootkot]

Hello @Zooney L, I have received your following comment in my channel's email but could not find it from here in the comments section, I am not sure what happened but I wanted to reply and clarify something you mentioned in the following comment:
7:55 By keeping the "main.innerHtml" outside of the loop, i would expect the resulting html to be only one div with the number "1000", not all numbers from 0 to 1000. How come it gives the same result as having it inside the loop? I thought the engine moved on from the loop only after it ended, which in this case only after i reaches 1000. Thank you
Here is my reply to your comment above:
At 7:55, event if you keep the main.innerHTML outside of the loop, we have this line: htmlString += `<div>${i}</div>`, in this line one thing I have to point out is that we are using +=, it is an addition assignment operator, the addition assignment operator will assign a new value to a variable based on its original value, in simple words it is equal to: originalValue + newValue, so it will let you keep the original value of the variable and also will let you able to add new value after the original value! Now regarding to this line: htmlString += `<div>${i}</div>`, what happens is that, when the loop runs the first time the value of htmlString will be: "<div>1</div>", when the loop runs second time the value of htmlString will be: "<div>1</div><div>2</div>", when the loop runs third time the value of htmlString will be: "<div>1</div><div>2</div><div>3</div>", this will continue until the loop ends and the number will become 1000.
And if we use assignment operator like this: htmlString = `<div>${i}</div>`, the final output will only be one div element with number 1000: "<div>1000</div>".
I hope this will help you clarify some points, if not please feel free to let me know for further discussion!
Good luck and happy learning!

[kootkot]

Hello @Zooney L, again I have received your comment in my channels email but could not find from here in the comments section, but I wanted to reply and clarify something you mentioned in the following comment:
7:28 Would you mind writing down what that "if statement" would look like? Thank you
Here is the if statement I mentioned at 7:28:
This if statements will make sure to update the html content only after the loop ends!
if (i === 100) {
main.innerHTML = htmlString;
console.log(htmlString);
}
Good luck and happy learning! 😀

[constantine]

today I learned for...of loop... seems to me that "for ... of loop " has much better syntax....

[p.rsoubhagyaranjan]

For me it is showing ${I} 10 times rather than values, Can u please help me