CODEWITHSUNDEEP
javascriptmenuhideshow
user2062658
user2062658

Reputation:

Javascript Show/hide

I dont know whats the mistake:

<script>
                function craft()
    {
    document.getElementById(craft).style.visibility="visible";
    document.getElementById(smell).style.visibility="hidden";
    document.getElementById(other).style.visibility="hidden";
    }

function smell()
{
document.getElementById(craft).style.visibility="hidden";
document.getElementById(smell).style.visibility="visible";
document.getElementById(other).style.visibility="hidden";
}

function other()
{
document.getElementById(craft).style.visibility="hidden";
document.getElementById(smell).style.visibility="hidden";
document.getElementById(other).style.visibility="visible";
}
        </script>



    <a onclick ="craft()" href="#">Craft</a><br>
    <a onclick ="smell()" href="#">Smell</a><br>
    <a onclick ="other()" href="#">Other</a><br>
    <div id="craft" style="display: none;" >CraftCraftCraftCraftCraftCraftCraft</div><br>
      <div id="smell" style="display: none;" >SmellSmellSmellSmellSmellSmellSmell</div><br>
        <div id="other" style="display: none;" >OtherOtherOtherOtherOtherOtherOther</div><br>

Im trying to make somethink like a menu. When i click Craft button, there will apear just the contain

I cant find the mistake... I tryed the code in browser, but there apeared jut the links... Ans when i clicked them, nothing happend...

Upvotes: 1

Views: 2834

Answers (1)

Sirko
Sirko

Reputation: 74076

Use ' around the IDs in document.getElementById(). For example:

document.getElementById('craft').style.visibility="visible";

Without them JavaScript will try to interpret craft as a variable (holding the value for the ID) and not as a string denoting the actual ID.

EDIT

After taking a second look, you do not use consistent properties to hide your <div>s:

At the start you hide them with display: none; and then try to make them shown by visibility: visible;. You have to be consistent here. Either use display or visibility. Both differ in what they actually do.

So either adjust your JavaScript to use display like this:

document.getElementById('craft').style.display = "block";

Or disable initially by using visibility: hidden; like this:

<div id="craft" style="visibility: hidden;" >CraftCraftCraftCraftCraftCraftCraft</div>

Working Example Fiddle

Upvotes: 5

Related Questions