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.
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>