How to fix query selectors (DOM) and event listeners?

Issue

I am currently doing Angela Yu's web development course. However, there is one thing that I am stuck on. At section 13 she introduces Event Listeners. However, when I try to click the "W" button, no alert box pops up. I know the JavaScript file is properly connected with the HTML file since I can make a simple alert pop up when I just write alert("Hello World");. Also, when I run the completed files for this section, it works perfectly. I am just stuck on this small step.

document.querySelector("button").addEventListsener("click", handleClick);

function handleClick() {
  alert("I got clicked!");
}

<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
  <button class="w drum">w</button>
  <button class="a drum">a</button>
  <button class="s drum">s</button>
  <button class="d drum">d</button>
  <button class="j drum">j</button>
  <button class="k drum">k</button>
  <button class="l drum">l</button>
</div>


<script src="index.js" charset="utf-8"></script>

<footer>
  Made with ❤️ in London.
</footer>

Solution

Change .addEventListsener to .addEventListener . Your rest of the code is correct.

If you want to apply event for key press like W shift up down... then use something like this in snippet below

document.addEventListener('keydown', function(event) {
  if (event.keyCode == "87") {
    document.querySelector("button").style.backgroundColor = "red";
    window.alert("W got clicked!");
  } else{document.querySelector("button").style.backgroundColor = "";}
});

<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
  <button class="w drum">w</button>
  <button class="a drum">a</button>
  <button class="s drum">s</button>
  <button class="d drum">d</button>
  <button class="j drum">j</button>
  <button class="k drum">k</button>
  <button class="l drum">l</button>
</div>


<script src="index.js" charset="utf-8"></script>

<footer>
  Made with ❤️ in London.
</footer>

Answered By - Rana