Trouble with Clicking to Show Content

Question

Trouble with Clicking to Show Content

<div id="uniqueDiv">
   <button id="uniqueButton1" class="uniqueClass">Hit</button>
   <button id="uniqueButton2" class="uniqueClass">Run</button>
</div>

<div id="uniqueDiv2">
<p id="uniqueId1"></p><!-- points -->
<p id="uniqueId2"></p><!-- strikes -->
</div>
<div id="uniqueDiv3">
    <button id="uniqueButton3" class="uniqueButtonClass">Score</button>
</div>
<script>
document.getElementById("uniqueButton1").onclick=function(){
     document.getElementById("uniqueDiv").style.display="none";
     document.getElementById("uniqueDiv2").style.display="block";
     document.getElementById("uniqueDiv3").style.display="block";
}
</script>

I have styled the display property of uniqueDiv3, uniqueDiv2 to none and the display property of uniqueDiv to block in css. When I click on the "Hit" button, I want uniqueDiv3 and uniqueDiv2 to appear while uniqueDiv disappears. However, the functionality does not seem to work correctly.

javascript css

Answer 1

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>

It is suggested to utilize console.log(); for testing purposes as it aids in debugging.

For instance, in the provided code snippet, the console will display "id 14 clicked" when the user clicks on the "Bat" button.

An error was identified in your code where incorrect id names were being used, such as id14 and 14.

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

It is suggested to utilize console.log(); for testing purposes as it aids in debugging.

For instance, in the provided code snippet, the console will display "id 14 clicked" when the user clicks on the "Bat" button.

An error was identified in your code where incorrect id names were being used, such as id14 and 14.

Answer 3

Answer №2

To make the necessary adjustment, simply switch your selector from id14 to 14, like in the code snippet below.

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

To make the necessary adjustment, simply switch your selector from id14 to 14, like in the code snippet below.

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

Answer №3

Your issue might be that you forgot to specify the onclick trigger when creating your buttons and did not define the function to retrieve your elements. Check out this simple example of a button with the onclick event and the function it triggers.

This example is courtesy of a well-known coding resource, w3schools.com. Hopefully, it points you in the right direction towards resolving your problem.

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

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

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

Answer 6

Your issue might be that you forgot to specify the onclick trigger when creating your buttons and did not define the function to retrieve your elements. Check out this simple example of a button with the onclick event and the function it triggers.

This example is courtesy of a well-known coding resource, w3schools.com. Hopefully, it points you in the right direction towards resolving your problem.

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

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

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

Trouble with Clicking to Show Content

Answer №1

Answer №2

Answer №3

Similar questions

Passing data from one component to another in Vue: A database perspective

Enhance your slideshows with React-slick: Integrate captivating animations

Incorporate ng-click as an attribute in AngularJS

Looking for a jQuery Gantt Chart that includes a Treeview, Zoom functionality, and editing capabilities?

Identifying the pressing of the enter key in an input field

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Creating a Flot Bar Chart that displays non-stacking values

Tips for integrating CSS3 into Android WebView

Dealing with the overflow issue on Android 4.1 using position: relative and position: absolute

Is there a way to automatically redirect the main html page to a different html page upon logging in?

Incorporating Angular 2 Templates: Exploring how to bind keydown.arrow event to the entire div rather than just specific

What is the best way to transmit several data fields to a PHP page using Ajax?

Switching CSS styles - seeking a smoother integration

CSS not displaying properly

Does Google Cloud CDN not store data from the storage bucket?

HTML5 Slideshow with Smooth Image Transitions

Leveraging an array retrieved through JQuery AJAX for auto-complete data in materializecss

Verify the search input to see if the value matches in the array and display the corresponding response

Trouble centering a list within a parent div using CSS

The jQuery .hasClass() function does not work properly with SVG elements