index.js:8 Uncaught TypeError: Cannot read property 'addEventListener' of undefined at index.js:8,
Question
I'm not sure how to exactly do this. but I can give it a try. I need help on this code, and I've provided the code that i believe is relevant to answering the question. I'm trying to get my code to send an alert when there is a key pressed on the website, although every time I run it It never works. I've looked at the dev tools in chrome and it said I got that error on chrome(my question). I looked through the html as some have said by it hasn't worked.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<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>
<footer>
Made with ❤️ in London.
</footer>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
I also looked at my java-script code and saw if there was any syntax error and I dont think there was, although since I am new, it may be on my part. I've tried to put my js code in "window.onload=function(){ -- put your code here }" but this hasn't worked and just didn't give me the desired result.If there is something I am missing or didn't do please help me, also I know keypressed is depreciated and so I used keydown, which I thought was my error, but it still didnt work. I would be greatly thankful to anyone that can assist me on this, I really enjoy programming thus far and I know these are the first steps to a very long journey. ??
for (var i = 0;i <= document.querySelectorAll(".drum").length; i++){
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
var buttonInnerHtml = this.innerHTML;
switch (buttonInnerHtml) {
case "w":
var crash = new Audio("sounds/crash.mp3");
crash.play();
break;
case "a":
var kickBass = new Audio("sounds/kick-bass.mp3");
kickBass.play();
break;
case "s":
var snare = new Audio("sounds/snare.mp3");
snare.play();
break;
case "d":
var tom1 = new Audio("sounds/tom-1.mp3");
tom1.play();
break;
case "j":
var tom2 = new Audio("sounds/tom-2.mp3");
tom2.play();
break;
case "k":
var tom3 = new Audio("sounds/tom-3.mp3");
tom3.play();
break;
case "l":
var tom4 = new Audio("sounds/tom-4.mp3");
tom4.play();
break;
default: console.log(buttonInnerHtml);
}
} );
}
document.addEventListener("keydown", drumKeys());
function drumKeys(){
alert("Key was pressed!");
}
1 answers
solution1
1 2020-07-29 03:29:38
The error is because of the loop
it should be
for (var i = 0;i < document.querySelectorAll(".drum").length; i++){
because you are looping one extra element in the last iteration the value of document.querySelectorAll(".drum")[i] will be undefined .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.