How to use querySelector when manipulating elements with classes that contain multiple words? - addeventlistener

Question

I'm trying to addEventListener that will listen for "click"s and will return an alert.
Is it class name or something else that creates the problem?
Couldn't figure out what am I doing wrong in this code:
HTML:
<button class="w drum">w</button>
Javascript:
var wDrum = document.querySelector(".w drum");
wDrum.addEventListener('click', 'alert("click!")');

Answer 1

All you're missing is changing the selector to .w.drum to find both classes on the same element:
var wDrum = document.querySelector(".w.drum");

Answer 2

Just giving you hint how to make workaround.
#pavlindrom answer is the shortest way to go around and should be a way to go.
But suppose you don't want to go around with '.w.drum' then my friend you need to get learned about CSS Selector Reference
Among many ways [attribute=value] is a way to target class attribute on the button. This is probabaly what query selector is doing behind the scene for '.w.drum'.
So in our case it would become "[class*=w drum]". '*=' part means constains substring in given string.
Example with attribute searching : side note will throw error.
var wDrum = document.querySelector("[class*=w drum]");
wDrum.addEventListener('click', () => {alert("click!")})
<button class="w drum">w</button>
Error is genrated becuase of space between w drum in [class*=w drum] JS engine doesn't really try too hard to make sense of things on its own.
So we have to tell it by explicitly telling it what mean, by using quotes. thus "[class*=w drum]" becomes "[class*='w drum']"
Updated Example: it works
var wDrum = document.querySelector("[class*='w drum']");
wDrum.addEventListener('click', () => {alert("click!")})
<button class="w drum">w</button>
If you keep the order of words right, it can work fine.
var wDrum = document.querySelector("[class*='w drum']");
wDrum.addEventListener('click', () => {alert("click!")})
<button class=" another-class w drum some-other-class">w</button>
Explainer in connection with your comment
.class1 .class2 With space in between classes selects all elements i.e. class 2 that are descendant of an element with class1
For example;
<div class='class1'>
<span class='class2'></span>
</div>
.class1.class2 with out any space searches for all elements with both class1 and class2 set within its class attribute
For example;
<div class='class1 class2'>
<span class='class2'></span>
</div>
document.querySelector(".w.drum") would return div tag because both classes are present in same tag attribute.
Why did the arrow function work?
addEventListener function expects two arguments ie.
.addEventListener(argument1, argument2)
argument1 must be a string referencing particular event type.
argument2 must be a call back function or at least reference to a already declared function.
For example
.addEventListener('click', function_name)
or as in direct declaration of function
.addEventListener('click', function () {})
or as in arrow function
.addEventListener('click', () => {})
Your code had argument2 as string so it didn't work
wDrum.addEventListener('click', 'alert("click!")')
but if we change it to function it works because both are executable functions
wDrum.addEventListener('click', () => {alert("click!")})
or
wDrum.addEventListener('click', function () {alert("click!")})
further gotcha following code would trigger alert the moment JS engine reads the code, so we had to excapsulate it into a parent function.
wDrum.addEventListener('click', alert("click!"))
var wDrum = document.querySelector(".w.drum");
wDrum.addEventListener('click', alert("click!"));
wDrum.addEventListener('mouseover', () => alert("hover!"));
<button class=" another-class w drum some-other-class">w</button>
alert, console.log, or document.querySelector etc are self triggering functions they execute moment code is run and do not wait for your interaction unless they are scoped into a parent function which is triggered on call back through your interaction.