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>

我已将display的{{1}}属性，div1设置为div3，将none的{{1}}属性设置为display }在css中，当我点击棒球时，我想要div4，block出现，而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时，上面的代码控制台将显示＆＃34; id 14点击＆＃34;

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

Answer 2

只需将您的选择器从id14更改为14，如下面的代码所示。

<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("14").onclick=function(){

     document.getElementById("div4").style.display="none";
     document.getElementById("div3").style.display="block";
     document.getElementById("div1").style.display="block";

}
</script>

Answer 3

我认为你的问题是你在创建按钮时没有定义onclick触发器，并且没有定义你的函数来获取你的元素。这是一个带有onclick调用的按钮的基本示例，以及它正在调用的函数。

由w3schools.com提供，希望这能为您提供解决方案。

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>

单击显示问题

3 个答案: