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

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';

        }
}

Look at: Array.isArray

Givi
– Givi

2014-02-03 22:10:55 +00:00
Commented Feb 3, 2014 at 22:10 — Givi
– Givi, Commented Feb 3, 2014 at 22:10
quack quack: if(elementIDs.join){ doArrayStuff... }

dandavis
– dandavis

2014-02-03 22:13:02 +00:00
Commented Feb 3, 2014 at 22:13 — dandavis
– dandavis, Commented Feb 3, 2014 at 22:13

Johannes H. · Accepted Answer · 2014-02-03 22:12:26Z

1

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

answered Feb 3, 2014 at 22:12

Johannes H.

6,1671 gold badge23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pooya Mobasher Behrooz · Accepted Answer · 2019-06-06 09:29:40Z

0

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);

edited Jun 6, 2019 at 9:29

answered Feb 3, 2014 at 22:16

Pooya Mobasher Behrooz

1,29210 silver badges18 bronze badges

1 Comment

kingcobra Over a year ago

This fixed my problems, why didn't I think to try this! Thanks!

dandavis · Accepted Answer · 2014-02-03 22:10:49Z

0

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';

        }
}

answered Feb 3, 2014 at 22:10

dandavis

16.8k5 gold badges43 silver badges38 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:28:39Z

0

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.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Feb 3, 2014 at 22:40

Mr. Smee

96012 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related