javascript - getElementById().value Returning Undefined -
i'm writing simple code change visibility of image when button clicked, document.getelementbyid().value
coming undefined
. (i've tried replacing .value
.display
- same result).
what problem?
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <script> function hideimage(imageid){ document.getelementbyid(imageid).visibility="hidden"; } function showimage(imageid){ document.getelementbyid(imageid).visibility="visible"; } function switchvis(imageid){ var curvis = document.getelementbyid(imageid).value; if(document.getelementbyid(imageid).value=="hidden"){ document.getelementbyid("output").innerhtml="hidden"; showimage(imageid); } else if(document.getelementbyid(imageid).value=="visible"){ hideimage(imageid); document.getelementbyid("output").innerhtml="visible"; } else{ alert("visibility issue!\nvisibility value " + curvis); } } </script> </head> <body> <img src="images/k3.gif" id="k3"><p> <button onclick=switchvis('k3')>visibility</button> <div id="output"></div> </body>
you cannot style
value using document.getelementbyid().value
. getcomputedstyle()
gives final used values of css properties of element. returned style cssstyledeclaration
object can used value of style. try follwing code. should work.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <script> function hideimage(imageid){ document.getelementbyid(imageid).style.visibility="hidden"; } function showimage(imageid){ document.getelementbyid(imageid).style.visibility="visible"; } function switchvis(imageid){ var curvis = document.getelementbyid(imageid); //your element style = window.getcomputedstyle(curvis); //returns cssstyledeclaration object curvis = style.getpropertyvalue('visibility'); //now css value if(curvis=="hidden"){ document.getelementbyid("output").innerhtml="visible"; showimage(imageid); } else if(curvis=="visible"){ hideimage(imageid); document.getelementbyid("output").innerhtml="hidden"; } else{ alert("visibility issue!\nvisibility value " + curvis); } } </script> </head> <body> <img src="images/k3.gif" id="k3" value="check"><p> <button onclick="switchvis('k3')">visibility</button> <div id="output"></div> </body>
Comments
Post a Comment