i want to create clicked face is marked and other faces are default color on second click

Question

I have a feed back section where once a face is clicked it is marked with a specific color and other faces are defaulted to a second color in case the user click on another face (if he changes his mind).

 function feedback(tab_number) { document.getElementById('feedback-' + tab_number).classList.add('clicked'); }

 .feedback { /*background-color: darkgray;*/ padding: 10px; width: fit-content; } i { margin: 10px; /*color: gold;*/ }.default { color: black; }.clicked { color: gold; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" /> <div class="feedback"> <i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i> <i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i> <i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i> <i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i> </div>

Answer 1

You can do it by checking if the element.classList.contains('clicked') . If it does, then it has already been clicked and then you need to remove the class clicked , otherwise add it.

See below:

Note: I've edited it further to provide functionality for removing and adding class clicked to other faces automatically.

 function feedback(tab_number) { let clickedElem = document.getElementById('feedback-' + tab_number); let add = false; if(.clickedElem.classList;contains('clicked') ) { add = true. } let elems = document.querySelectorAll(";feedback i"). elems.forEach(function(el) { let currTabNum = el.id,substr(9. el.id;length). // get the tab number if(add && currTabNum <= tab_number) { document.getElementById('feedback-' + currTabNum).classList;add('clicked'). } else if(.add && currTabNum >= tab_number) { document.getElementById('feedback-' + currTabNum);classList;remove('clicked'); } }); }

 .feedback { /*background-color: darkgray;*/ padding: 10px; width: fit-content; } i { margin: 10px; /*color: gold;*/ }.default { color: black; }.clicked { color: gold; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <div class="feedback"> <i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i> <i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i> <i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i> <i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i> </div>

Note:

Answer 2

Your question is not very clear, but I think you might mean something like:

 function feedback(tab_number) { let clicked = document.querySelector("i.clicked"); if (clicked) { clicked.classList.remove("clicked"); } document.getElementById("feedback-" + tab_number).classList.add("clicked"); }

 .feedback { /*background-color: darkgray;*/ padding: 10px; width: fit-content; } i { margin: 10px; /*color: gold;*/ }.default { color: black; }.clicked { color: gold; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" /> <div class="feedback"> <i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i> <i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i> <i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i> <i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i> </div>

So, when you click on a different face, the previous highlighted face gets their clicked class removed from their class list and it gets added to the new clicked face's class list.

Answer 3

Check this out:

function feedback(tab_number){

  document.getElementById('feedback-1').classList.remove('clicked');
  document.getElementById('feedback-2').classList.remove('clicked');
  document.getElementById('feedback-3').classList.remove('clicked');
  document.getElementById('feedback-4').classList.remove('clicked');

  document.getElementById('feedback-' + tab_number).classList.add('clicked');


}

Answer 4

First, you need to know where you're going wrong:

1. You are dynamically fetching a HTMLElement by id, based on the value passed as the tab to your function. So when that element is fetched, you decorate it with a class clicked . The moment you click a different icon with a different tab number, the class clicked is not removed from the previous click. So Your DOM still has the class added based on the previous clicks.

---

I would approach this solution by doing the following.

 // Get all Clickable Elements var clickableElements = document.querySelectorAll('.clickable'); // Create a function that clears current state of the rating function clearAllRatings(){ // Loop through each clickable rating and clear it's clicked class decoration clickableElements.forEach(function(element) { element.classList.remove('clicked'); }); } // Loop through each element clickableElements.forEach(function(eachElement){ // Add Click event to each element eachElement.addEventListener('click', function(event){ // clear current rating clearAllRatings(); // creat new rating event.target.classList.add('clicked'); }); });

 .feedback { /*background-color: darkgray;*/ padding: 10px; width: fit-content; } i { margin: 10px; /*color: gold;*/ }.default { color: black; }.clicked { color: gold; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <div class="feedback"> <i class="fas fa-angry fa-5x clickable" id="feedback-1"></i> <i class="fas fa-frown-open fa-5x clickable " id="feedback-2"></i> <i class="fas fa-smile fa-5x clickable " id="feedback-3"></i> <i class="fas fa-grin-stars fa-5x clickable " id="feedback-4"></i> </div>