Search code examples
javascripthtmljquerycssmousehover

It is necessary to go over an element at least once to execute JS code

I am doing a Connect Four in HTML CSS JS and I want to display a token at the top of the grid if you are hover the grid, align to the column so I put a listener to the grid. But to display this I need to go over all the elements at least one time and then after it will display as expected.

Here's the snippet, I'm sorry for the low quality code

quiJoue = 0;

$('#grille').on("mouseover", function(e) {
  let couleur = quiJoue % 2 === 0 ? "Jaune" : "Rouge";
  let classes = e.target.classList;
  if (classes.contains("top") && classes.contains("pion")) {
    let courant = e.target;
    $(courant).css("background", 'yellow').css("background-size", "contain");
  } else if (classes.contains('pion')) {
    let courant = (e.target);
    let colonne = (e.target.parentNode.classList[2]).split("-")[1];
    $('.cell.row-top.colonne-' + colonne).children().css("background", 'yellow').css("background-size", "contain")
    $(courant).hover(function() {
      $('.cell.row-top.colonne-' + colonne).children().addClass('top_hover');
    }, function() {
      $('.cell.row-top.colonne-' + colonne).children().removeClass('top_hover')
    });
  } else if (classes.contains('cell')) {
    let colonne = (e.target.classList[2]).split("-")[1];
    let courant = (e.target);
    $('.cell.row-top.colonne-' + colonne).children().css("background", 'yellow').css("background-size", "contain")
    $(courant).hover(function() {
      $('.cell.row-top.colonne-' + colonne).children().addClass('top_hover');
    }, function() {
      $('.cell.row-top.colonne-' + colonne).children().removeClass('top_hover')
    });

  }
});
.game-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 700px;
  margin: 10px 0 25px;
  width: 700px;
}

.cell {
  align-items: center;
  background: #4370F1;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 100px;
}

.pion {
  background: white;
  background-size: contain;
  border-radius: 50%;
  border: 3px solid black;
  height: 75px;
  width: 75px;
}

.top {
  transition: opacity 50ms linear;
  opacity: 0;
  border: 0;
}

.top:hover {
  transition: opacity 50ms linear;
  background-size: contain;
  opacity: 1;
}

.top_hover {
  transition: opacity 50ms linear;
  background-size: contain;
  opacity: 1;
}

.cell:not(.row-top).red::after {
  background: red;
}

.cell:not(.row-top).yellow::after {
  background: yellow;
}

.cell:not(.row-top).red.win {
  background: red;
}

.cell:not(.row-top).yellow.win {
  background: yellow;
}

.cell.row-top {
  background: rgba(255, 255, 255, 0);
}

.cell.row-top::after {
  border: none;
}

.cell.row-top.red::after {
  background: red;
  border: 3px solid black;
}

.cell.row-top.yellow::after {
  background: yellow;
  border: 3px solid black;
}

.left-border {
  border-left: 3px solid black;
}

.top-border {
  border-top: 3px solid black;
}

.right-border {
  border-right: 3px solid black;
}

.bottom-border {
  border-bottom: 3px solid black;
}

.left-border.top-border {
  border-radius: 10px 0 0 0;
}

.right-border.top-border {
  border-radius: 0 10px 0 0;
}

.right-border.bottom-border {
  border-radius: 0 0 10px 0;
}

.left-border.bottom-border {
  border-radius: 0 0 0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center justify-content-center d-flex">
  <div class="game-board justify-content-center" id="grille" style="grid-template-columns: repeat(7, 1fr);">
    <div class="cell row-top colonne-0">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-1">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-2">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-3">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-4">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-5">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-6">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-0 colonne-0 left-border top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-1 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-2 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-3 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-4 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-5 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-6 right-border top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-0 left-border bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-1 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-2 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-3 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-4 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-5 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-6 right-border bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
  </div>
</div>

Solution

  • I will try to demonstrate the issue in some bullet points, so let me know if they are not clear enough.

    • After the compiling process ends and your page load, there are no listeners attached to the game elements.
    • In the first hover iteration, your code will initialize the event listener dynamically but will not execute it.
    • After that, you have a listener attached to your element and will fire its callback function from now on.
    • So, for every hover event after that, your code will work as expected

    SOLUTION

    We need to attach the event listener to all game elements statically not dynamically. so here is the JS code we need.

        $(".pion").hover(function(e) {
      const colonne = (e.target.parentNode.classList[2]).split("-")[1];
      $('.cell.row-top.colonne-' + colonne).children().toggleClass('top_hover');
    })

    It will select all elements with pion class and will attach them our hover event that toggles the class name of the related colonne number.

    Note: I have hard-coded the background color of the token to yellow in the HTML snippet for all columns. you can remove it and handle the logic of Jaune and Rouge

    <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>


    $(".pion").hover(function(e) {
  const colonne = (e.target.parentNode.classList[2]).split("-")[1];
  $('.cell.row-top.colonne-' + colonne).children().toggleClass('top_hover');
})
    .game-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 700px;
  margin: 10px 0 25px;
  width: 700px;
}

.cell {
  align-items: center;
  background: #4370F1;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 100px;
}

.pion {
  background: white;
  background-size: contain;
  border-radius: 50%;
  border: 3px solid black;
  height: 75px;
  width: 75px;
}

.top {
  transition: opacity 50ms linear;
  opacity: 0;
  border: 0;
}

.top:hover {
  transition: opacity 50ms linear;
  background-size: contain;
  opacity: 1;
}

.top_hover {
  transition: opacity 50ms linear;
  background-size: contain;
  opacity: 1;
}

.cell:not(.row-top).red::after {
  background: red;
}

.cell:not(.row-top).yellow::after {
  background: yellow;
}

.cell:not(.row-top).red.win {
  background: red;
}

.cell:not(.row-top).yellow.win {
  background: yellow;
}

.cell.row-top {
  background: rgba(255, 255, 255, 0);
}

.cell.row-top::after {
  border: none;
}

.cell.row-top.red::after {
  background: red;
  border: 3px solid black;
}

.cell.row-top.yellow::after {
  background: yellow;
  border: 3px solid black;
}

.left-border {
  border-left: 3px solid black;
}

.top-border {
  border-top: 3px solid black;
}

.right-border {
  border-right: 3px solid black;
}

.bottom-border {
  border-bottom: 3px solid black;
}

.left-border.top-border {
  border-radius: 10px 0 0 0;
}

.right-border.top-border {
  border-radius: 0 10px 0 0;
}

.right-border.bottom-border {
  border-radius: 0 0 10px 0;
}

.left-border.bottom-border {
  border-radius: 0 0 0 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center justify-content-center d-flex">
  <div class="game-board justify-content-center" id="grille" style="grid-template-columns: repeat(7, 1fr);">
    <div class="cell row-top colonne-0">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-1">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-2">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-3">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-4">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-5">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-6">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-0 colonne-0 left-border top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-1 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-2 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-3 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-4 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-5 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-6 right-border top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-0 left-border bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-1 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-2 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-3 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-4 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-5 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-6 right-border bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
  </div>
</div>