html - Not able to change div display property using javascript -


i trying change display property of div using js not showing change.

in js code if statements not becoming true though in css properties set properly. please novice , not understanding issue. below code trying

my html code:

<!doctype html> <html> <head> <script src="main.js" type="text/javascript"></script> </head> <body>  <nav id="nav">       <ul class="main_nav">     <li id="about_me"><a href="#" onclick="about_me_sel()">about me</a></li>     <li id="home1"><a href="#" onclick="home_sel()">home</a></li> </ul> </nav> <div id="about"> <p>hello</p> </div> <div id="home"> <p>hi</p> </div> </body> 

my js code:

function about_me_sel() {     var id;     id =document.getelementbyid("about");     if(id.style.display == "block")     {     id.style.display = "none";     } }  function home_sel() { var id; id= document.getelementbyid("home");  if(id.style.display == "none") {id.style.display = "block"; } else alert("hello"); } 

that won't work first time around. style property not connected stylesheet, javascript doesn't know rule's you've set there. style property reflects style attribute gets written element's tag. (you can hard-code 1 html if want.) value null until set it.

before

<div id="about"> 

after

<div id="about" style="display: block"> 

try reversing conditional

if (id.style.display != "block") {     id.style.display = "block"; } else {     id.style.display = "none"; } 

Comments

Popular posts from this blog

java - JavaFX 2 slider labelFormatter not being used -

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -