I am following a code to make a quiz. I am building a function to highlight one list item and add a class to it.
function chooseAnswer(){
answer.querySelectorAll('li').forEach((option)=> {
option.addEventListener('click',()=>{
if(answer.querySelector('.selected')){
let activeAnswer=answer.querySelector('.selected');
activeAnswer.classList.remove('selected')
}else
option.classList.add('selected')
})
The code is working but i do not understand the if condition from the source. Can someone help?
if(answer.querySelector('.selected')) statement is used to check whether there are any elements of answer, which have the .selected class
answer.querySelector('.selected') will return the element with .selected class if it exists within the answer element.
If there is no .selected class within the answer element, it will return null.
In this code:
if(answer.querySelector('.selected')){
---
}else
option.classList.add('selected')
If the if condition is null that means there was no .selected element found. So the else block gets executed and it adds a .selected class to option.
But if there was a .selected class inside the answer element, the if condition would be truthy and would execute. Removing the .selected class.