Having trouble with jQuery's show/hide methods not functioning properly

Check out my codepen for everyone to experiment with.... CodePen.io

I'm having trouble displaying the #play-again button after a game is over using $('#play-again').show().

Any suggestions on this issue???

Update Included raw html link

Answer №1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="banner">
    <p>tic-tac-toe</p>
      <button id="play-again"> <i class="fa fa-repeat"></i></button>
    
  </div>
  <div class="board">
    <div class="row" id="row-1">
      <div class="col" id="col-1-1">
        <div class="content"></div>
      </div>
      <div class="col" id="col-1-2">
        <div class="content"></div>
      </div>
      <div class="col" id="col-1-3">
        <div class="content"></div>
      </div>
    </div>
    <div class="row" id="row-2">
      <div class="col" id="col-2-1">
        <div class="content"></div>
      </div>
      <div class="col" id="col-2-2">
        <div class="content"></div>
      </div>
      <div class="col" id="col-2-3">
        <div class="content"></div>
      </div>
    </div>
    <div class="row" id="row-3">
      <div class="col" id="col-3-1">
        <div class="content"></div>
      </div>
      <div class="col" id="col-3-2">
        <div class="content"></div>
      </div>
      <div class="col" id="col-3-3">
        <div class="content"></div>
      </div>
    </div>
  </div>
</div>

The problem arises when the button#play-again is incorrectly placed inside the p tag, moving it outside resolves the issue in my case.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to set a value within a jQuery function, and then invoke another function to utilize that value?

Suppose I have a function called isPercentage, which utilizes a value that is defined within the function it's being called in: isPercentage = function(){ if (value < 1){ value = value * 100; console.log(value); ...

The error "ReferenceError: process is not defined in vue 3" is being

<script setup> import puppeteer from 'puppeteer'; const onChange = async () => { // Initializing the puppeteer library const browser = await puppeteer.launch(); // Creating a new page const page = await browser.newPage(); / ...

Unit test produced an unforeseen outcome when executing the function with the setTimeout() method

When manually testing this code in the browser's console, it performs as expected. The correct number of points is displayed with a one-second delay in the console. const defer = (func, ms) => { return function() { setTimeout(() => func.ca ...

Is it possible to create an instance of a superclass and automatically instantiate a specific subclass based on the parameters provided?

Currently, I am utilizing Google's GSON package which can be found at this link My task involves converting JSON data to Java objects. Below is a snippet of the code where the conversion process takes place: Gson gson = new Gson(); Type collectionT ...

Updating the content of a file on an iPhone

Is there a way to update the entire document content with a response from an ajax request? I've tested out using document.body.innerHTML and document.write(), which both work on desktop Safari. However, I'm looking for a solution that will also ...

Silent response upon click event listener

I'm having an issue with a navbar item not calling the reverseService function on click as expected. Although my IDE is indicating that the reverseService function is never used, VueJS dev tool doesn't show any problems. However, manually changi ...

Error encountered in Express.js blogging app: Issue arises when attempting to filter posts by category, resulting in a "Cast to ObjectId failed" error

Currently, I am developing a blogging application using technologies like Express, EJS, and MongoDB. In the application, I have structured posts into different categories, each stored in its own collection. However, I encountered an issue while attemptin ...

My Django function doesn't get triggered by the form submission using post method

I'm facing a frustrating dilemma and issue. Currently, I am working on a form written in HTML using Django, which is meant to update information in my database related to the specific page it is on. The problem lies in the fact that the Django termi ...

Having trouble with the redirection of my Django registration page

I have encountered an issue while creating a registration page for my Django project. The problem arises when I compile the registration form as it is trying to navigate to a path where it repeats 'users/register'. Instead of going to 'local ...

Which one is more suitable for optimizing my effect - useCallback or useMemo?

When a user hovers on a button, the following tooltip will trigger an API call. I'm unsure whether I should use useCallback or useMemo to optimize this process and prevent unnecessary API calls. I find it challenging to determine the appropriate use c ...

Deactivate the other RadioButtons within an Asp.net RadioButtonList when one of them is chosen

Is there a way to disable other asp.net radio buttons when one of them is selected? I have three radio buttons, and I want to disable the other two when one is selected. After doing some research, I managed to disable the other two when the third one is se ...

Ways to retrieve the value of the chosen radio button using Prototype or JQuery

Looking for a way to retrieve the value of the selected radio button using either JQuery or Prototype? Check out this sample form: <label for="deliveryChoice">Courier&nbsp;<b>&pound;3.00</b></label> <input type="radio" ...

Develop a slider feature based on radio button selection

I am currently working with radio buttons for ticket selection. <div> <input type="radio" name="ticket" value="Standard"> Standard <input type="radio" name="ticket" value="Express"> Express <input type="radio" name="ticket" value= ...

Is there a way to display sorting icons consistently and in a blue color for the currently selected sorting column in a React material-table component?

I recently used the material-table library to create a material table, but I am having trouble displaying the sorting icon continuously for all columns. In addition, I would like the color of the column that is currently sorted to be blue. If you want to ...

finding and retrieving every occurrence of the select directive and its corresponding selected values in Angular

I recently set up a chosen dropdown in my project using the following method. I added a select box with a "chosen" directive as an attribute to update and initialize a list, along with an ng-model on the select element. <select id="{{$index+1}}" class= ...

relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining ...

Leveraging TypeScript to share information between directives in AngularJS through asynchronous calls

Although I've found some scattered information on how to tackle this issue, I haven't been able to find a solid solution. In my AngularJS application, I have an asynchronous call that fetches data from a server and I need to store it in a variab ...

Displaying a child component as a standalone page rather than integrating it within the parent component's body

I'm currently working on implementing nested navigation in my website, but I am facing challenges with loading the child component without the need to include a router-outlet in the parent component. This setup is causing the child component's co ...

What is the reason behind HTML5Boilerplate and other frameworks opting for a CDN to host their jQuery files

When it comes to loading jQuery, HTML5Boilerplate and other sources[citation needed] have a standard process that many are familiar with: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window. ...

What causes Bootstrap to malfunction when the route contains double slashes?

When using /something, everything works fine, but when switching to /something/somethingelse, Bootstrap fails to function. It seems that the number of "/" characters in the route is causing this issue, rather than the content inside the .ejs file. Here is ...