Reputation: 501
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
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