For Loop in Javascript (document.getElementById)

Question

I have a little Javascript problem. Instead of using this:

document.getElementById("hoverinv1").style.display = "";
document.getElementById("hoverinv2").style.display = "";
document.getElementById("hoverinv3").style.display = "";
document.getElementById("hoverinv4").style.display = "";
document.getElementById("hoverinv5").style.display = "";
document.getElementById("hoverinv6").style.display = "";
document.getElementById("hoverinv7").style.display = "";
document.getElementById("hoverinv8").style.display = "";
document.getElementById("hoverinv9").style.display = "";
document.getElementById("hoverinv10").style.display = "";

I wanted to use this:

for (var x = 0; x < 11; x++) {
    document.getElementById("hoverinv" + x).style.display="";
}

To display again everything. Well, it does nothing and I have no idea whats the problem.

give your elements a class instead?

Patsy Issa
– Patsy Issa

2014-11-10 15:41:27 +00:00
Commented Nov 10, 2014 at 15:41 — Patsy Issa
– Patsy Issa, Commented Nov 10, 2014 at 15:41
x should start from 1 not 0

Alex Char
– Alex Char

2014-11-10 15:42:14 +00:00
Commented Nov 10, 2014 at 15:42 — Alex Char
– Alex Char, Commented Nov 10, 2014 at 15:42
Look at the console.

SLaks
– SLaks

2014-11-10 15:43:15 +00:00
Commented Nov 10, 2014 at 15:43 — SLaks
– SLaks, Commented Nov 10, 2014 at 15:43

jpreed00 · Accepted Answer · 2014-11-10 15:42:50Z

6

It's probably throwing an error on the first iteration because hoverinv0 does not exist. You want

for (var x = 1; x < 11; x++) {
  document.getElementById("hoverinv" + x).style.display="";
}

answered Nov 10, 2014 at 15:42

jpreed00

8939 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thiago Negri · Accepted Answer · 2014-11-10 15:43:22Z

0

Your first code starts with "hoverinv1" and in your loop you start with "hoverinv0".

Probably, it is not finding the element, returning undefined and then your script crashes when you try to access style property.

Check the browser's console, it should emit an error or something.

answered Nov 10, 2014 at 15:43

Thiago Negri

5,3713 gold badges30 silver badges40 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2014-11-10 15:53:04Z

0

Do it simply in CSS:

[id^=hoverinv] {
  display: block; /* or any other needed display value */
}

Your issue: by inspecting your JS in Console you can clearly see that it breaks while fetching your hoverinv0 ID element (does not exists).

What you can:

assign a class class="hoverinv" to all your element and go for:

var hoverInv = document.getElementsByClassName("hoverinv");
for (var i=0; i<hoverInv.length; i++){
     hoverInv[i].style.display = "";
}

or using

var hoverInv = document.querySelectorAll("[id^=hoverinv]");
for (var i=0; i<hoverInv.length; i++){
     hoverInv[i].style.display = "";
}

or something you might go fix all over again as soon you change the number of elements:

for(var i=1; i<11; i++){
   document.getElementById("hoverinv"+ i).style.display = "";
}

edited Nov 10, 2014 at 15:53

answered Nov 10, 2014 at 15:43

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

For Loop in Javascript (document.getElementById)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related