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
Post a Comment