I have the following JS function which on click is making the chosen element to be selected(is changing the background color) and should make all other elements to remove this class. However, for some reason onClick the "menu-category-hover" class is not removed.
function GetData(allMenuItems, theCategoryId) {
// Remove selected class on other Elements
allMenuEl = document.querySelectorAll('menu-category');
for (var i = 0; i < allMenuEl; i++) {
allMenuEl[i].classList.remove("menu-category-hover");
}
.....
// On element Click
var hoverEl = document.getElementById("menu_cat_" + theCategoryId);
hoverEl.classList.add("menu-category-hover");
}
<div class="menu-category menu-category-hover" onclick="GetData(, 13)" id="menu_cat_13">
<img src="/images/85783_burger.png" class="menu-home-image-img">
<p class="menu-home-name">Burgers</p>
<div>
Check this
function GetData(allMenuItems, theCategoryId) {
// Remove selected class on other Elements
allMenuEl = document.querySelectorAll('.menu-category'); //<--- class indicator `.`
for (var i = 0; i < allMenuEl.length; i++) { //<-- not added allMenuEl.length
allMenuEl[i].classList.remove("menu-category-hover");
}
.....
// On element Click
var hoverEl = document.getElementById("menu_cat_" + theCategoryId);
hoverEl.classList.add("menu-category-hover");
}