Div style is undefined (Javascript)
25,825
Solution 1
You should never use a for-in loop for that.
document.getElementsByClassName('someClass')
returns a NodeList, which doesn't inherit from Array.prototype
, but it is similar in some aspects. It's a list of nodes, just like the name says. This means it has a length
property and should only be accessed using:
var myElements = document.getElementsByClassName('yourClass');
for (var i = 0, ii = myElements.length; i < ii; i++) {
console.dir(myElements[i].style);
};
And here is how you should actually hide an element.
/**
* 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.
Solution 2
for(var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
EDIT: for in loops are used to loop through object properties
Solution 3
Replace
for(var div in divs) {
with
for(var i=0; i<divs.length;i++) {
var div = divs[i];
divs
, the result of getElementsByClassName, isn't really an array but a NodeList, an array-like object and you were iterating on its properties, not its elements.
Author by
Simulator88
Updated on July 12, 2022Comments
-
Simulator88 almost 2 years
I found this script in stackoverflow.
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>
But it says, div.style undefined. Why? :)