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>Spelling addEventListener correctly aside
Please delegate
Click in the snippet before typing
const set = document.querySelector(".set");
const keys = set.querySelectorAll('.drum');
const handleClick = e => {
const tgt = e.target;
if (tgt.classList.contains('drum')) {
console.log(tgt.textContent, "got clicked!");
}
};
const keyArr = [...keys].map(key => key.textContent.toUpperCase());
const handleKey = e => {
const tgt = e.target;
const key = e.code.slice(-1)
const index = keyArr.indexOf(key)
if (index != -1) keys[index].click()
};
set.addEventListener("click", handleClick);
document.addEventListener("keypress", handleKey);<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>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>