javascript - 点击显示问题

Question

<div id="div4">
   <button id="14" class="b1">Bat</button>
   <button id="15" class="b1">Bowl</button>
</div>

<div id="div3">
<p id="id4"></p><!-- score -->
<p id="id5"></p><!-- balls -->
</div>
<div id="div1">
    <button id="id7" class="c1">Defence</button>
</div>
<script>
document.getElementById("id14").onclick=function(){
     document.getElementById("div4").style.display="none";
     document.getElementById("div3").style.display="block";
     document.getElementById("div1").style.display="block";
}
</script>

我已经将 div1 和 div3 的 display 属性设置为 none 并且 display div4 的属性到 css 中的 block，当我点击 bat 时，我想要 div1，div3出现和 div 4 消失。 当我运行上面的代码时，它不起作用。

Answer 1

<div id="div4">
   <button id="14" class="b1">Bat</button>
   <button id="15" class="b1">Bowl</button>
</div>

<div id="div3">
<p id="id4">p id4</p>
<p id="id5">p id5</p>
</div>
<div id="div1">
    <button id="id7" class="c1">Defence</button>
</div>
<script>
var ct = 0;    
document.getElementById("14").onclick=function(){
     console.log('id 14 clicked');
     document.getElementById("div4").style.display="none";
     document.getElementById("div3").style.display="block";
     document.getElementById("div1").style.display="block";

}
</script>

我建议使用 console.log(); 进行测试，它有助于调试

例如:在上面的代码中，当用户点击 Bat 时，控制台将显示“id 14 clicked”。

我注意到您在代码中使用了错误的 ID 名称:例如 id14 和 14。