javascripthtmljquerycss

How to count a single specific tile in a grid with divs having the same class


We want to count the grid tiles like in the bottom example, but in a more efficient way. like if we want to add 100 grid tiles instead of 9

console.log("connected");
var clicks1 = 0,
  clicks2 = 0,
  clicks3 = 0,
  clicks4 = 0,
  clicks5 = 0,
  clicks6 = 0,
  clicks7 = 0,
  clicks8 = 0,
  clicks9 = 0,
  i = 0;
var clikcs = [clicks1, clicks2, clicks3, clicks4, clicks5, clicks6, clicks7, clicks8, clicks9];

$(".grid-item").click(function() {
  clicks1++;

  console.log("clicked " + clicks1);
  i = clicks1 % 3;

  if (i === 1) {
    $(this).removeClass("slika1")
    $(this).removeClass("slika3")
    $(this).addClass("slika2")
  } else if (i === 2) {
    $(this).removeClass("slika2")
    $(this).removeClass("slika1")
    $(this).addClass("slika3")
  } else {
    $(this).removeClass("slika3")
    $(this).removeClass("slika2")
    $(this).addClass("slika1")
  }
})

// bottom example

/*
$("#grid1").click(function(){
    clicks1++;
    
    // console.log("clicked "+ clicks);
     i=clicks1%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})

$("#grid2").click(function(){
    clicks2++;
    
    // console.log("clicked "+ clicks);
     i=clicks2%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid3").click(function(){
    clicks3++;
    
    // console.log("clicked "+ clicks);
     i=clicks3%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid4").click(function(){
    clicks4++;
    
    // console.log("clicked "+ clicks);
     i=clicks4%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid5").click(function(){
    clicks5++;
    
    // console.log("clicked "+ clicks);
     i=clicks5%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid6").click(function(){
    clicks6++;
    
    // console.log("clicked "+ clicks);
     i=clicks6%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid7").click(function(){
    clicks7++;
    
    // console.log("clicked "+ clicks);
     i=clicks7%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid8").click(function(){
    clicks8++;
    
    // console.log("clicked "+ clicks);
     i=clicks8%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid9").click(function(){
    clicks9++;
    
    // console.log("clicked "+ clicks);
     i=clicks9%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})*/
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.main_container {
  width: 60%;
  height: 80%;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: auto auto auto;
  position: absolute;
}

.grid-item {
  background-attachment: fixed;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  background-size: cover;
}

.slika1 {
  background-image: url("/images/narava2.jpg");
}

.slika2 {
  background-image: url("/images/cat.jpg");
}

.slika3 {
  background-image: url("/images/food-spread.jpg");
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>puzzle</title>
</head>

<body>
  <div class="main_container">
    <div id="grid1" class="grid-item slika1">1</div>
    <div id="grid2" class="grid-item slika1">2</div>
    <div id="grid3" class="grid-item slika1">3</div>
    <div id="grid4" class="grid-item slika1">4</div>
    <div id="grid5" class="grid-item slika1">5</div>
    <div id="grid6" class="grid-item slika1">6</div>
    <div id="grid7" class="grid-item slika1">7</div>
    <div id="grid8" class="grid-item slika1">8</div>
    <div id="grid9" class="grid-item slika1">9</div>
  </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="js/script.js" type="text/javascript"></script>
</body>

</html>

The problem is that the variable that is counting the clicks is counted for every click in the div instead of for the specific tile. We tried a lot of things, but we couldn't figure it out, sadly.


Solution

  • You could always use the html dataset to hold an element state. I also wrote a function which dynamically creates the grid items and appends it to the container. Hopefully this demo makes it clear one way to accomplish something like this 👍 If you have any questions about my demo always feel free to ask for clarification.

    const get = query => [...document.querySelectorAll(query)];
    const STARTING_GRID_COUNT = 9;
    const gridContainer = get(".grid-container")[0];
    
    const gridItemClicked = e => {
      const data = e.target.dataset;
      const gridNumber = data.count;
      const timesClicked = Number(data.timesClicked) + 1;
      e.target.dataset.timesClicked = timesClicked;
      console.log(`grid item ${gridNumber} clicked ${timesClicked} times`);
    };
    
    let gridItemCount = 0;
    const createGridItem = () => {
      const gridItem = document.createElement("div");
      gridItem.classList.add("grid-item");
      gridItem.dataset.count = gridItemCount;
      gridItem.dataset.timesClicked = 0;
      gridItem.textContent = gridItemCount;
      gridItem.addEventListener(
        "click",
        gridItemClicked
      );
      gridContainer.appendChild(gridItem);
      gridItemCount++;
    };
    
    for (let i = 0; i < STARTING_GRID_COUNT; i++) {
      createGridItem();
    }
    
    get("button")[0].addEventListener("click", createGridItem);
    .grid-container {
      display: inline-grid;
      --size: 30px;
      grid-template-columns:
        repeat(3, var(--size));
      border: 1px solid black;
    }
    
    .grid-container .grid-item {
      height: var(--size);
      width: var(--size);
      display: grid; place-items: center;
    }
    
    .grid-container .grid-item:hover {
      background: lightblue;
    }
    <div class="grid-container">
    </div>
    <button>Add Grid Item</button>