thinkofacard
thinkofacard

Reputation: 501

making a div appear and disappear using javascript

Any idea what I'm doing wrong?

https://jsfiddle.net/6hvtc749/

Here's the function I'm using:

<script>
    function dblock_on() {

                document.getElementById('donation').checked = true;
                document.getElementById('dblock').style.display = "block";
                document.getElementById('sblock').style.display = "none";
    }
    function sblock_on() {

                document.getElementById('sponsorship').checked = true;
                document.getElementById('sblock').style.display = "block";
                document.getElementById('dblock').style.display = "none";
    }       
</script>

Upvotes: 0

Views: 332

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You're missing the #sblock div in your HTML which causes sblock_on() to error and exit before it can change the #dblock style. Either remove the references to #sblock in your function(s) or add that element to your html so that the scripts don't error/exit before they can finish running all of the code.

#dblock {
  display: none;  
}
 <form action="" method="post">
 
   <h3>Type</h3>
        <input name="rtype" id="sponsorship" type="radio" value="sponsorship">
        <label for="sponsorship" onclick="sblock_on()">Sponsorship</label>
        <input name="rtype" id="donation" type="radio" value="donation">
        <label for="donation" onclick="dblock_on()">Donation</label>
        
   <div id="dblock">
     <h3>Amount</h3>
     <input name="amount" type="text" class="form_text" size="5px" maxlength="10" value="" placeholder="$0"> 
   </div>
 </form>
 
 <script>
 function dblock_on() {
				document.getElementById('donation').checked = true;
				document.getElementById('dblock').style.display = "block";
	}
	function sblock_on() {
				document.getElementById('sponsorship').checked = true;
				document.getElementById('dblock').style.display = "none";
	}		
  </script>

Upvotes: 4

Related Questions