passing two elements to function

I want to pass two elements in the same event to a function so as to display both elements upon clicking a link button.

this is the function

function showMenu(elmnt)
        {
            document.getElementById(elmnt).style.visibility="visible";
        }

These are the two element I want to display. Only the first one is displayed. How can I display both at the same time by clicking the button.

<div id="navigation">
        <ul>
            <li><a href="#" onClick="showMenu('scroll')" onClick="showMenu('oath')" >Oath</a></li>
            <li><a href="#">Apply</a></li>
        </u开发者_如何学Pythonl>
    </div>

function showMenu(elmnt1, elmnt2) {
    document.getElementById(elmnt1).style.visibility="visible";
    document.getElementById(elmnt2).style.visibility="visible";
}

onClick="showMenu('scroll', 'oath')"

or:

function showMenu(elements) {
    for (var i = 0; i < elements.length; i++) {
        document.getElementById(elements[i]).style.visibility="visible";
    }
}

onClick="showMenu(['scroll', 'oath'])"

This all could be done much more elegantly by attaching the event handlers using Javascript etc., you should look into unobtrusive Javascript.

function showMenu(elmnt1, elmnt2)
{
   document.getElementById(elmnt1).style.visibility="visible";
   document.getElementById(elmnt2).style.visibility="visible";
}

<li><a href="#" onclick="showMenu('scroll', 'oath'); return false;">Oath</a></li>

The return false is to stop the standard event the browser would perform when hitting on the link.

Couldn't you just use onClick="showMenu('scroll', 'oath');return false;" and then have the function:

function showMenu(el1, el2)
    {
        document.getElementById(el1).style.visibility="visible";
        document.getElementById(el2).style.visibility="visible";
    }

The preferred method of attaching events is using addEventListener instead of attributes. You need to add IE support using attachEvent. MDN - addEventListener().

Passing an array so we can have an "on" as second argument

function showHide(elmnt,on) {
  if (elmnt.length==null) elmnt=[elmnt]; 
  for (var i=0,n=elmnt.length;i<n;i++) {
    var item = document.getElementById(elmnt[i]);
    if (item) item.style.visibility=on?"visible":"hidden";
  }
  return false;
}

Multiple:

<a href="#" onclick="return showHide(['scroll','oath'],1)">Show</a>
<a href="#" onclick="return showHide(['scroll','oath'],0)">Hide</a>

single items:

<a href="#" onclick="return showHide('scroll',1)">Show</a>
<a href="#" onclick="return showHide('scroll',0)">Hide</a>

Alternatively, pass on as first argument and, as suggested elsewhere, loop over the arguments object object from item 1

function showHide() {
  var on = arguments[0]
  for (var i=1,n=arguments.length;i<n;i++) { // from 1
    var item = document.getElementById(arguments[i]);
    if (item) item.style.visibility=on?"visible":"hidden";
  }
  return false;
}


<a href="#" onclick="return showHide(1,'scroll','oath')">Show</a>
<a href="#" onclick="return showHide(0,'scroll','oath')">Hide</a>

Lastly (getting into jQuery territory here) pass an object to allow selective on and off

function showHide(obj) {
  for (var o in obj) {
    var item = document.getElementById(o);
    if (item) item.style.visibility=obj[o]?"visible":"hidden";
  }
  return false;
}


<a href="#" onclick="return showHide({'scroll':1,'oath':0})">Show scroll, hide oath</a>
<a href="#" onclick="return showHide({'scroll':0,'oath':1})">Hide scroll, Show oath</a>

try something like this:

function showMenu(elmnt1, elmnt2)

{

document.getElementById(elmnt1).style.visibility="visible";
            document.getElementById(elmnt2).style.visibility="visible";

}

<li><a href="#" onClick="showMenu('scroll', 'oath')">Oath</a></li>