2015-09-25 186 views
0
<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> 

我设置的div1display财产,div3nonediv4block在CSS中,display财产当我点击蝙蝠,我想div1div3出现和DIV 4〜 dissapear。 当我运行上面的代码,它不工作。点击时显示问题

+4

它看起来像你的按钮的ID是14,而不是“id14”。 – NineToeNerd

+1

像@NineToeNerd说,这里是https://jsfiddle.net/DIRTY_SMITH/uajLx8ue/ –

回答

2
<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();用于测试目的,它可以帮助做调试运行

例如:在上面的代码控制台上会显示“ID 14单击”蝙蝠当用户点击。

我注意到在你的代码中你使用了错误的ID名:例如id1414

1

只需将您的选择器从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> 
+0

@Sri Harsha:请让我知道它是否有效。 –

+0

它的工作原理!谢谢你的帮助。 –

+0

@SriHarsha如果真的有帮助,请大声点..所以它可以帮助其他观众.. –

-1

我觉得你的问题是创建按钮,并没有定义你的功能,让您的元素,当你没有定义的onclick触发。这是一个带onclick调用的按钮的基本示例,以及它正在调用的函数。

礼貌w3schools.com,希望这导致为您的解决方案。

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

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

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

这不是问题。有很多方法可以调用javascript函数。 – tanjir