Cesar Rodas Cesar Rodas - 6 months ago 18
Javascript Question

cannot get a hidden class to display with jquery

I'm working on a tic tac toe game on codepen and created my own modal. The first modal works very well and appears and disappears correctly. My second modal has a class that sets opacity and visibility so that the element is invisible just like the first. The difference is that when I remove the class that hides the element. The element doesn't appear.

I believe I have read before that this has to do with jquery not knowing about the element being hidden. I cannot remember how to fix it and couldn't find another problem like it. I want to know why the first element works and the second doesn't? I placed some of the relevant code for context and a link to the whole thing.

This is the codepen link



hasWon(){
let scores = this.scoring();
console.log(scores);
let win = $('.popup.end');
for(let i = 0; i < scores.length; i++){
let win = $('.end');
if(scores[i] === 3 || scores[i] === -3){
if(this.player === 1 && scores[i] === 3
|| this.player === -1 && scores[i] === -3){
win.html("<h4>Player won the Game!</h4>");
} else {
win.html("<h4>Computer won the Game!</h4>");
}
$('.back').removeClass('showEl');
win.classList.remove("hideEl");
}
}
if(this.emptyIndices().length === 0){
win.html("<h4>It's a draw!</h4>");
$('.back').removeClass('showEl');
// THIS SHOULD ACTIVATE SECOND MODAL!
win.classList.remove("hideEl");
}
}

.popup {
font-family: 'Signika', 'sans-serif';
margin: 100px auto 0 auto;
width: 600px;
height: 270px;
background: #d0e6d0;
border: 6px solid #97b097;
box-shadow: 0px 0px 1000px 2000px rgba(228, 241, 228, 0.9);
border-radius: 60px;
position: relative;
z-index: 1;
visibility: visible;
opacity: 1;
transition: all .5s;
}

.popup h4 {
padding-top: 60px;
font-weight: bold;
font-size: 2.5em;
left: 13%;
position: absolute;
}

.hideEl {
opacity: 0;
visibility: hidden;
}

.showEl {
opacity: 1;
visibility: visible;
}

<div class="popup end hideEl">
<h4>Ending Message</h4>
</div>




Answer

Your jquery code is awesome and perfect, except there was problem with html. You did not close the div with class - .popup.who which is why the div with class - .popup.end would end up wrapping withing .popup.who - div and after finishing with first modal when you hide .popup.who - div, it actually hides the .popup.end too, since the same was wrapped within the .popup.who - div.

Faulty Code

<div class="popup who">
  <h4>Do you want to play as X or O?</h4>
  <button type="button" class="btn btn-lg btn-primary choose_x player">X</button>
  <button type="button" class="btn btn-lg btn-primary choose_o player">O</button>
<div> <!--This here wasn't ending the div-->

<div class="popup end hideEl">
  <h4>Ending Message</h4>
</div>

Corrected code

<div class="popup who">
  <h4>Do you want to play as X or O?</h4>
  <button type="button" class="btn btn-lg btn-primary choose_x player">X</button>
  <button type="button" class="btn btn-lg btn-primary choose_o player">O</button>
</div>

<div class="popup end hideEl">
  <h4>Ending Message</h4>
</div>

UPDATED CODEPEN