CODEWITHSUNDEEP
javascriptcss
Sri Harsha
Sri Harsha

Reputation: 107

On Click Display Issue

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

I have set the display property of div1, div3 to none and the display property of div4 to block in css, when I click on bat, I want div1, div3 to appear and div 4 to dissapear. When I run the above code its not working.

Upvotes: 0

Views: 115

Answers (3)

user5295866
user5295866

Reputation: 

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

I recommand to use console.log(); for testing purpose it helps to do debuging

Eg: in above code console will show "id 14 clicked", when user click on Bat.

I have noticed in your code you are using wrong id names: like id14 and 14.

Upvotes: 2

Zsadok
Zsadok

Reputation: 1

I think your issue is that you did not define the onclick trigger when creating your buttons and have not defined your function to get your elements. Here's a basic example of a button with the onclick call, and the function it's calling.

courtesy of w3schools.com, hope this leads to a solution for you.

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

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

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

Upvotes: -1

Sandeep Kushwah
Sandeep Kushwah

Reputation: 592

Just change your selector from id14 to 14 as in below code.

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

Upvotes: 1

Related Questions