onclick event with div tag - html

Question

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">
Home <br/>
SignOut <br/>
</div>
It is working fine but the problem is list is not displaying on the first click. Any thing wrong with my code.??

Answer 1

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:
It's best to use triple equal === to perform strict comparison without converting variable type.
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.

Answer 2

list.style.visibility=='hidden' is a false statement on first click
try this
{if(list.style.visibility=='hidden' || list.style.visibility='')

Answer 3

<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">
Home <br/>
SignOut <br/>
</div>​

Answer 4

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.
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">
Home <br/>
SignOut <br/>
</div>

Answer 5

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.

Answer 6

Go for something like this -
if(list.style.visibility=="visible")
{
list.style.visibility="hidden";
}
else
{
list.style.visibility="visible"
}