pass multiple arguments into a single parameter

Question

I found a script on the internet which displays and hides snippets of code:

 function show(shown, hidden,) {
    document.getElementById(shown).style.display='block';
    document.getElementById(hidden).style.display='none';
    return false;
 }


<a href="#" onclick="return show('Page1','Page2');">Page 1</a>
<a href="#" onclick="return show('Page2','Page1');">Page 2</a>

My question is, how would I alter this to include more pages?

The only way I could find that worked was this:

    function show(shown, hidden1, hidden2, hidden3) {
      document.getElementById(shown).style.display='block';
      document.getElementById(hidden1).style.display='none';
      document.getElementById(hidden2).style.display='none';
      document.getElementById(hidden3).style.display='none';
      return false;
    }


<a href="" onclick="return show('Page1','Page2','Page3','Page4' );">Page 1</a>
<a href="" onclick="return show('Page2','Page1','Page3','Page4' );">Page 2</a>
<a href="" onclick="return show('Page3','Page1','Page2','Page4' );">Page 3</a>
<a href="" onclick="return show('Page4','Page1','Page2','Page3' );">Page 4</a>

...but it seems a little messy. So is there a way to pass 3 pages all at once into the 'hidden' argument in the script?

Thanks!

Sirko · Accepted Answer · 2013-01-04 15:06:03Z

You can pass an array as hidden parameter. Then you would have to modify your JS like this:

function show(shown, hidden ) {
    document.getElementById(shown).style.display='block';
    for( var i=hidden.length; i--; ) {
      document.getElementById(hidden[i]).style.display='none';
    }
    return false;
 }

and the HTML would look like this:

<a href="" onclick="return show('Page1', ['Page2','Page3','Page4'] );">Page 1</a>

As an alternative you could work with classes instead of setting styles. Then you could drop the hidden parameter all together:

function show( shown ) {

    // remove class 'shownPage' everywhere
    var els = document.querySelectorAll( '.shownPage' );
    for( var i=els.length; i--; ) {
      els.classList.remove( 'shownPage' );
    }

    // and just add it to the page to show
    document.getElementById(shown).classList.add( 'shownPage' );

    return false;
 }

Kjartan · Accepted Answer · 2013-01-04 15:22:41Z

1

You can pass an array as the second argument, or even use the already existing arguments array like object :

function show() {
    document.getElementById(arguments[0]).style.display='block';
    for(var i=1; i<arguments.length; i++){
        document.getElementById(arguments[i]).style.display='none';
    }
}

With this code the first argument is the id to show all other arguments are id to hide.

edited Jan 4, 2013 at 15:22

Kjartan

19.2k16 gold badges75 silver badges102 bronze badges

answered Jan 4, 2013 at 15:07

yent

1,3431 gold badge8 silver badges10 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:04:33Z

0

You can use arguments, pass an array as suggested by Sirko, an object or use a method of selecting all nodes of your choice (e.g. a class) and then show only the one you want

// arguments
function show() {
    var i = arguments.length;
    if (i > 0) {
        while (--i) document.getElementById(arguments[i]).style.display = 'none';
        document.getElementById(arguments[0]).style.display = 'block';
    }
}
// show('vis_id_1', 'hid_id_1', 'hid_id_2',...)

// object
function show(obj) {
    var id;
    for (id in obj) {
        if (obj.hasOwnProperty(id)) { // safety filter
            document.getElementById(id).style.display = obj[id];
        }
    }
}
// show({'vis_id_1':'block', 'hid_id_1':'none'});

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Jan 4, 2013 at 15:14

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Collectives™ on Stack Overflow

pass multiple arguments into a single parameter

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related