Javascript: From within a function, test if variable is array or not

StackOverflow https://stackoverflow.com/questions/21538871

Question

I have created four links to change the visibility of certain elements.

Runthrough:

Clicking "One" will pass the id: "one" to the makeVis() function and will also pass ids: "two" and "three" to the makeInvis() function.

Problem:

  • When I click links one two or three for the first time it works correctly. However if I go on to click another link, whether it be the same or not, all elements are hidden.

  • The fourth link "One and three" does not seem to work at all

Can anybody help me with what is going wrong and advise me of a possible solution, I've been strolling the net for 3 hours now.

<body>
<h1>JavaScript: Visibility</h1>
<div>
    <p>
        <a href="#" onclick="makeInvis(['two','three']); makeVis( 'one' );">One</a>
        <a href="#" onclick="makeInvis(['one','three']); makeVis( 'two' );">Two</a>
        <a href="#" onclick="makeInvis(['one','two']); makeVis( 'three' );">Three</a>   
        <a href="#" onclick="makeInvis( 'two' ); makeVis( ['one','three']);">One and Three</a>
    </p>
</div>    
<div class="owrapper">
    <div id="one" class="iwrapper">
        <p><strong>Element one</strong></p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
    </div>
    <div id="two" class="iwrapper">
        <p><strong>Element two</strong></p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
    </div>
    <div id="three" class="iwrapper">
        <p><strong>Element three</strong></p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
        <p>Here is my paragraph</p>
    </div>
</div>
</body>

This is my javascript code

function makeVis( elementIDs )
{   
    if (!(elementIDs instanceof Array))
    {
         var element = elementIDs;
         element.style.visibility='visible';
    }
    else
        for (var n=0; n < elementIDs.length; n++)
        {
            var currentElement = document.getElementById(elementIDs[n]);
            currentElement.style.visibility='visible';

        }
}

function makeInvis( elementIDs )
{
    if (!(elementIDs instanceof Array))
    {
         var element = elementIDs;
         element.style.visibility='hidden';
    }
    else
        for (var n=0; n < elementIDs.length; n++)
        {
            var currentElement = document.getElementById(elementIDs[n]);
            currentElement.style.visibility='hidden';

        }
}
Était-ce utile?

La solution 2

You are using element as it was an HTMLElement but it's still an Array, so first find the actual element by id, then use DOM methods on it:

var element = elementIDs;

to

var element = document.getElementById(elementIDs);

Autres conseils

Use Array.isArray() (only modern browsers, no IE7 AFAIK) or myVar instanceof Array.

you can simplify each routine by coercing all input into an array and handling the array:

function makeVis( elementIDs )
{   
   elementIDs=String(elementIDs).split(",");

        for (var n=0, mx=elementIDs.length; n < mx; n++)
        {
            document.getElementById(elementIDs[n]).style.visibility='visible';

        }
}

The best way to check if a variable is an array:

var arr = [];

var obj = {};

Object.prototype.toString.call(arr) === '[object Array]' //true

Object.prototype.toString.call(obj) === '[object Array]' //false

See this answer for more info.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top