CODEWITHSUNDEEP
html
RAVITEJA SATYAVADA
RAVITEJA SATYAVADA

Reputation: 2571

onclick event with div tag

I tried something with div tag as follows,

  <style type="text/css">
    #hello{
        visibility: visible;
        cursor: pointer;
        position: absolute;
    }
    #list{
        visibility: hidden;
        cursor: pointer;
        position: absolute;
        top: 30px;
        z-index:  1;
        background-color: aqua;
    }
    #second{
            position: absolute;
    }
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden'){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
      <div id="second">Welcome to smartdata</div>
      <div id="list">
          <a href="index.jsp">Home</a> <br/>
          <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/>
      </div>

It is working fine but the problem is list is not displaying on the first click. Any thing wrong with my code.??

Upvotes: 1

Views: 12462

Answers (6)

Mak
Mak

Reputation: 604

Go for something like this - 

if(list.style.visibility=="visible")
{
   list.style.visibility="hidden";
}
else
{
   list.style.visibility="visible"
}

Upvotes: 0

vendettamit
vendettamit

Reputation: 14687

This is because your if..else are not in order. Re-ordering of decision statement corrected the behavior, Now first click is showing the menu items.

Also, If you run your script and watch it in firebug console you'll see your javascript code is throwing warning on first click.

enter image description here

I've updated your code - 

     <style type="text/css">
    #hello{
        visibility: visible;
        cursor: pointer;
        position: absolute;
    }
    #list{
        visibility: hidden;
        cursor: pointer;
        position: absolute;
        top: 30px;
        z-index:  1;
        background-color: aqua;
    }
    #second{
            position: absolute;
    }

</style>

<script type="text/javascript">

function Clickme()
{
var list = document.getElementById('list');

if(list.style.visibility=='visible')
{
list.style.visibility='hidden';
}
else
{
list.style.visibility='visible'
}
}
</script>
<div id="hello" onclick="Clickme();">Hello user</div><br/>
      <div id="second">Welcome to smartdata</div>
      <div id="list">
          <a href="index.jsp">Home</a> <br/>
          <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/>
      </div>

Upvotes: 1

Oleg
Oleg

Reputation: 9359

Your code doesn't work as you expect it to due to the way element.style works.

Check this MDN link on element.style: https://developer.mozilla.org/en/DOM/element.style

Since the style property has the same (and highest) priority in the CSS cascade as an inline style declaration via the style attribute, it is useful for setting style on one specific element.

However, it is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets.

So when you first run your code and even if your element.style.hidden is declared in the external CSS sheet, the style declaration remains empty and you need to perform additional checks.

if (!list.style.visibility || list.style.visibility === 'hidden') {...}

You can take a look at the fiddle to see it work: http://jsfiddle.net/Kk6TJ/1/

Also:

  1. It's best to use triple equal === to perform strict comparison without converting variable type.
  2. You don't need curly braces in your event handlers. If you were hoping that they would create scope - they don't! Only functions in JavaScript have scope.

Upvotes: 2

Musa
Musa

Reputation: 97727

Styles defined in style tags and css files are not in the element.style.property property, they are available if the element has its style set inline <element style="property:value;"> or explicitly element.style.property = value;

To get styles for an element defined in style tags/sheets use window.getComputedStyle(element, null).getPropertyValue(property);`

So you can either inline the styles on list, use getComputedStyle getPropertyValue or use the fact that list.style.visibility is going to be empty on the first click.

Upvotes: 0

Rab
Rab

Reputation: 35582

 <style type="text/css">
    #hello{
        visibility: visible;
        cursor: pointer;
        position: absolute;
    }
    #list{
        visibility: hidden;
        cursor: pointer;
        position: absolute;
        top: 30px;
        z-index:  1;
        background-color: aqua;
    }
    #second{
            position: absolute;
    }
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden' || list.style.visibility==''){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
      <div id="second">Welcome to smartdata</div>
      <div id="list">
          <a href="index.jsp">Home</a> <br/>
          <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/>
      </div>​

Upvotes: 1

Kshitij
Kshitij

Reputation: 8634

list.style.visibility=='hidden' is a false statement on first click

try this

{if(list.style.visibility=='hidden' || list.style.visibility='')

Upvotes: 2

Related Questions