How to add and remove class on element using onclick on them.
If I click on 1.st symbol for the first time its class will add and if I click on the symbol a second time its class will be removed
If I click on 2.st symbol for the first time its class will add and if I click on the symbol a second time its class will be removed
e.t.c
It working but only on 1.st element
Ploblem is if i click on the first, second, third or fourth symbol it always changes the first one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet"href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<Section class="s1">Smartphone <span class="material-symbols-outlined"> <span id="id1" class="favorite" onclick="favourite(this);">favorite </span></span></Section>
<Section class="s2">Laptop <span class="material-symbols-outlined"> <span id="id1" class="favorite" onclick="favourite(this);">favorite </span></span></Section>
<Section class="s3">Keyboard <span class="material-symbols-outlined"> <span id="id1" class="favorite" onclick="favourite(this);">favorite </span></span></Section>
<Section class="s4">Monitor <span class="material-symbols-outlined"> <span id="id1" class="favorite" onclick="favourite(this);">favorite </span></span></Section>
</body>
</html>
.favorite{
color:black;
font-weight: 1000;
}
.favorite:hover{
color:red;
}
.fill{
font-variation-settings:
'FILL' 1;
}
var i=0;
function favourite(elmnt){
i++;
var test = document.getElementById(elmnt.id);
if (i == 1) {
test.style.color = "red";
test.classList.add('fill'); //add fill in class
}
if (i == 2) {
test.style.color = "black";
test.classList.remove('fill'); //remove fill in class
i =0;
}
}
3
Answers
To add and remove classes on elements using onclick, you can modify your code to use the
classList.toggle()method, which will add the class if it doesn’t exist, or remove it if it does. You can also simplify your code by using a single function to handle all elements.Here’s an example code snippet that should accomplish what you’re trying to do:
This code loops through all elements with class "favorite" and adds an onclick event listener to each one. When an element is clicked, the
toggleFavorite()function is called.Inside the function, the
classList.toggle()method is used to add or remove the "fill" class from the clicked element. The color of the element is also toggled between black and red by checking the current value of the style.color property.With this code, clicking on any element with class "favorite" should toggle the "fill" class and change the color of the element.
This part of the code
var test = document.getElementById(elmnt.id);is unnecesary, you already passed the element with yourfavourite(this)function.Here is an example that toggles classes to do what you ask when you click the hearts. Slight format change just to enhance the example; the script and classes it toggles is what you want to focus on here.
id="id1"since they are not really need here.onclick="favourite(this);to a proper event handler so removed thoseclass="s1"toclass="section-fav"to allow simpler CSS for a style (not part of the answer really)color: #FF0000AA;and the slightly lighter grey on the unclicked to not stick out so much.Credit to some code I borrowed for part of this: https://stackoverflow.com/a/57127781/125981