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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -