2015-09-25 149 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