डिव स्टाइल अपरिभाषित है (जावास्क्रिप्ट)

Question

मुझे यह स्क्रिप्ट स्टैक ओवरफ्लो में मिली।

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> 

लेकिन यह कहता है, div.style अपरिभाषित। क्यूं कर? :)

Answer 1

सुनिश्चित करें कि आपके for-in लूप में सभी तत्व डोम तत्व हैं। यह एक hasOwnProperty() साथ फिल्टर करने के लिए for-in पाश एक अच्छा अभ्यास है:

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

संपादित करें: लूप में के लिए वस्तु गुण लूप करने के लिए उपयोग किया जाता है

Answer 3

बदलें

for(var div in divs) { 

साथ

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

divs, getElementsByClassName का परिणाम, वास्तव में एक सरणी नहीं है, लेकिन एक नोडलिस्ट, एक सरणी जैसी वस्तु है और आप इसके गुणों पर पुनरावृत्त कर रहे थे, न कि इसके तत्व।

Answer 4

आपको इसके लिए कभी भी लूप का उपयोग नहीं करना चाहिए।

document.getElementsByClassName('someClass') 

रिटर्न एक NodeList, जो Array.prototype से विरासत नहीं है, लेकिन यह कुछ पहलुओं में समान है। यह नामों की तरह, नोड्स की एक सूची है। इसका मतलब यह है कि यह एक length संपत्ति है और केवल का उपयोग करके एक्सेस किया जाना चाहिए:

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

और यहाँ कैसे आप वास्तव में एक तत्व को छिपाने चाहिए।

/** 
* 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.