Div Stil ist nicht definiert (Javascript)

Question

ich dieses Skript in Stackoverflow gefunden.

function showhide(id){ 
     if (document.getElementById) { 
      var divid = document.getElementById(id); 
      var divs = document.getElementsByClassName("hideable"); 
      for(var div in divs) { 
      div.style.display = "none"; 
      } 
      divid.style.display = "block"; 
     } 
     return false; 
     } 

<a href="#" onclick="showhide('features');" >features</a> 
<a href="#" onclick="showhide('design');" >design</a> 
<a href="#" onclick="showhide('create');" >create</a> 

<div class="hideable" id="features">Div 1</div> 
<div class="hideable" id="design">Div 2</div> 
<div class="hideable" id="create">Div 3</div> 

Aber es sagt, div.style undefined. Warum? :)

Answer 1

Sicherstellen, dass alle Elemente in Ihrer for-in Schleife sind DOM-Elemente. Es ist eine gute Praxis for-in Schleife mit einem hasOwnProperty() zu filtern:

 for(var div in divs) { 
      if (divs.hasOwnProperty(div)) { 
       if (div && div.style) { 
        div.style.display = "none"; 
       } 
      } 
     } 

Answer 2

for(var i = 0; i < divs.length; i++) { 
     divs[i].style.display = "none"; 
     } 

EDIT: für in Schleifen zu Loopeigenschaften durch Objekts verwendet werden

Answer 3

Ersetzen

for(var div in divs) { 

mit

for(var i=0; i<divs.length;i++) { 
    var div = divs[i]; 

divs, das Ergebnis von getElementsByClassName, ist nicht wirklich ein Array, sondern eine NodeList, ein arrayähnliches Objekt, und Sie haben die Eigenschaften und nicht die Elemente iteriert.

Answer 4

Sie sollten nie eine For-In-Schleife dafür verwenden.

document.getElementsByClassName('someClass') 

gibt ein NodeList, die nicht von Array.prototype nicht erben, aber es ist in einigen Aspekten ähnlich. Es ist eine Liste von Knoten, genau wie der Name sagt. Das bedeutet, es eine length Eigenschaft hat und sollte nur mit zugegriffen werden:

var myElements = document.getElementsByClassName('yourClass'); 
for (var i = 0, ii = myElements.length; i < ii; i++) { 
    console.dir(myElements[i].style); 
}; 

Und hier ist, wie Sie sollte eigentlich ein Element verstecken.

/** 
* Shows or hides an element from the page. Hiding the element is done by 
* setting the display property to "none", removing the element from the 
* rendering hierarchy so it takes up no space. To show the element, the default 
* inherited display property is restored (defined either in stylesheets or by 
* the browser's default style rules.) 
* 
* Caveat 1: if the inherited display property for the element is set to "none" 
* by the stylesheets, that is the property that will be restored by a call to 
* showElement(), effectively toggling the display between "none" and "none". 
* 
* Caveat 2: if the element display style is set inline (by setting either 
* element.style.display or a style attribute in the HTML), a call to 
* showElement will clear that setting and defer to the inherited style in the 
* stylesheet. 
* @param {Element} el Element to show or hide. 
* @param {*} display True to render the element in its default style, 
* false to disable rendering the element. 
*/ 
var showElement = function(el, display) { 
    el.style.display = display ? '' : 'none'; 
}; 

var myElement = document.getElementById('someID'); 
showElement(myElement, false);// it should now be hidden.