I’m trying to add a class to a random button, but .addClass()
is not working and shows me an error, and when I tried to use Vanilla JS classList.add()
everything is working fine.
const button = $('.btn');
const sound = $('.audio');
const wrongSound = $('.audio-wrong');
let randomNumber = Math.floor(Math.random() * 4);
button.on('click', () => {
startGame();
});
const startGame = () => {
console.log(button);
console.log(randomNumber);
button[randomNumber].toggleClass("pressed");
}
Vanilla JS is working, but jQuery shows me an error.
2
Answers
The
toggleClass()
method is used to add or remove a class from an element, depending on whether or not the element already has that class. In your code, you are trying to usetoggleClass()
on an element that is selected using an index, rather than a jQuery object.To fix this issue, you can use the
eq()
method to select the element at the specified index as a jQuery object, like this:Alternatively, you can use the
get()
method to get the element at the specified index as a DOM element, and then use theaddClass()
method to add the class:Either of these approaches should allow you to add the class to the desired element using jQuery.
jQuery Object vs. Native DOM Object
One important thing to remember about jQuery is that a jQuery Object (ex.
$(selectorString)
) is not a native DOM Object (ex.document.querySelector(selectorString)
). This means that jQuery methods and properties will not function with DOM Objects and the same applies to native DOM API methods and properties being incompatible with jQuery Objects. Also, jQuery Objects are collections of elements but are not arrays. As already pointed out in alisait’s answer the following line is your culprit:This part:
button[randomNumber]
is also this:$(".btn")[randomNumber]
. Any time the bracket notation is suffixed to a jQuery Object it becomes dereferenced into a DOM Object, hence.toggleClass()
failed. FYI, there is an alternative way to dereference a jQuery Object as well:One more problem is that
randomNumber
is outside of the calling functionstartGame()
and within a closure so the value ofrandomNumber
is consistently the same on every call ofstartGame()
. To get a different number on every call ofstartGame()
definerandomNumber
withinstartGame()
.