javascript - 使用javascript使div出现和消失

知道我在做什么错吗？

https://jsfiddle.net/6hvtc749/

这是我正在使用的功能：

<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>

最佳答案

您在HTML中缺少#sblock div，这会导致sblock_on()错误并退出，然后它才能更改#dblock样式。删除函数中对#sblock的引用，或将该元素添加到html中，以使脚本在完成所有代码运行之前不会出错/退出。

#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>