www.webdeveloper.com
Results 1 to 2 of 2

Thread: onclick show/hide

  1. #1
    Join Date
    Nov 2013
    Posts
    44

    onclick show/hide

    i am trying to create a button which will show/hide an image on click.it works only one time after reload.how to make it continuous.can anyone point out where the mistake lies in my code .thanks!!!
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    #imag{
    	width:300px;
    	height:300px;
    	display:none;
    }
    </style>
    <script>
    function show(imgs,bttn){
    	if(show.last && show.lst){
    		show.last.style.display="none";
    		
    		show.lst.setAttribute('value',"show");
    		}
    		
    else{
    	
          var s=document.getElementById(imgs);
    	  var t=document.getElementById(bttn);
    	  s.style.display="block";
    	  t.setAttribute('value',"hide");
    	  	show.last=s;
    		show.lst=t;}
    	
    }
    
    </script>
    </head>
    
    <body>
    <div><input type="button" value="show" onClick="retrun false" onMouseDown="show('imag','btn');" id="btn"></div>
    <img src="image1.jpg" id="imag">
    </body>
    </html>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <script>
    function doc(id){return document.getElementById(id);}
    function showHide(im,bt){
    var b=doc(bt),i=doc(im);
    (b.value==='show')?[i.style.display='block',b.value='hide']:[i.style.display='none',b.value='show'];
    }
    
    window.onload=function(){
    doc('btn').onclick=function(){showHide('imag',this.id);}
    }
    </script>
    live demo
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles