For Loop in Javascript (document.getElementById) - Stack Overflow

admin管理员组

文章数量:1287970

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.

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.

• javascript

Share Improve this question Follow edited Nov 10, 2014 at 15:45 But I'm Not A Wrapper Class 14.3k66 gold badges4747 silver badges6767 bronze badges asked Nov 10, 2014 at 15:40 ShigetoraShigetora 3311 gold badge11 silver badge44 bronze badges 3

• 2 give your elements a class instead? – Patsy Issa Commented Nov 10, 2014 at 15:41
• 4 x should start from 1 not 0 – Alex Char Commented Nov 10, 2014 at 15:42
• 3 Look at the console. – SLaks Commented Nov 10, 2014 at 15:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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="";
}

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.

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 = "";
}

本文标签： For Loop in Javascript (documentgetElementById)Stack Overflow