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