yishak abrham• 2,150
@yishak621
Posted
Hello hussen great work on a design and also the error message ... but when we come to the radio btns there is a bug to fix ... when i try to click on btn it make all the other smaller than the clicked btns active .. and it shouldn't be like that use querySelectorAll to grab all radio btns and since they are nodelist use forEach method to iterate over and to close the active btn(if there is already active btn other than the user click) and adding the active class to the radio btn that is currently clicked (e.target) ...
The forEach code snippets is
//remove active state from btns
eachBtns.forEach((btn) => {
btn.classList.remove('btn-active');
e.target.classList.add('btn-active');
...the full code snippets is here
function callBack() {
//logic-when we click on the btns container[ratingbtns]
ratingBtns.addEventListener('click', (e) => {
const id = e.target.dataset.id;
console.log(id);
if (id) {
//remove active state from btns
eachBtns.forEach((btn) => {
btn.classList.remove('btn-active');
e.target.classList.add('btn-active');
textResult.innerHTML = `You selected <span class="result-number"> ${id}</span> out of 5`; //printing the selected value to result
});
}
});
}
0
