jQuery show/hide methods arent working

Here is my codepen for you guys to play with.... CodePen.io

I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().

Any thoughts on this???

Update Added raw html link

Answers 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 issue is that you must place the button#play-again outside the p when i changed, it is working for me


Related Articles