Question 333059 in Html Question posted in
Some basic documentation can be found here.

Html – Im am having trouble with a javascript loop

The code is messy but what I am trying to achieve is creating a class with the value of "cool" by using loops.

I started by putting each of the paragraphs in each of their own variable and then I placed them in a loop where I stated that I wanted each of them to have a classname of "cool", I also stated that I wanted this value i.e "cool" to display in the HTML just so that I can ensure that it is working, but is not going through and i would like to know what I am doing and/or you have a more efficient way of going about this.

var i;
var loop1 = document.getElementById("cool");
var loop2 = document.getElementById("cool1");
var loop3 = document.getElementById("cool2");
var loop4 = document.getElementById("cool3");
var loop5 = document.getElementById("cool4");

var loops = [loop1, loop2, loop3, loop4, loop5];
var loopsLng = loops.length;

for (i = 0; i > loopsLng; i++) {
  document.getElementById(loops[i]).className = "cool";
  var one = document.getElementById(loops[i]).getAttribute("class");
  document.getElementById(loops[i]).innerHTML = one;
}
<p id="cool" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>
<p id="cool1" style="margin-top:2rem; background-color:#b35900; 2rem; color:white;"></p>
<p id="cool2" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>
<p id="cool3" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>
<p id="cool4" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>
Tags:

2

Answers


  1. 0

    The issue is in the loop itself

    for (i = 0; i > loopsLng; i++)

    should be

    for (i = 0; i < loopsLng; i++)
    Login or Signup to reply.
  2. 0
    1. You don’t need to declare the i variable in advance. In fact it’s better if you don’t, so that you don’t accidentally use it outside the loop.
    2. The elements don’t have to be in their own variables, you can declare them all already inside the list.
    3. There’s no need to save the loops.length into its own variable either.
    4. Your i > loopsLng is inverted, it should be i < loopsLng. This is the main problem.
    5. It’s nicer to store loops[i] in a local variable so you don’t repeat it multiple times.
    6. There’s a better loop type you can use here, for (const item of list). With this you don’t have to use indexes anymore.
    7. Prefer const and let instead of var, it’ll save you some headache with variable scoping in the future.
    8. loops is not a very descriptive name for a list of elements. Try elements instead.
    const elements = [
    document.getElementById("cool"),
    document.getElementById("cool1"),
    document.getElementById("cool2"),
    document.getElementById("cool3"),
    document.getElementById("cool4"),
]
for (const element of elements) {
    element.className = "cool";
    element.innerHTML = element.getAttribute("class");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search