I have getting errors using event listener. Console keeps telling me to put a bracket in my index.js file, however when I put it there, it then says the bracket should not be there.
This is my HTML markup:
<!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>
<script src = "index.js" charset="utf-8"></script>
<footer>
Made with ❤️ in London.
</footer>
</body>
</html>
CSS:
body {
text-align: center;
background-color: #283149;
}
h1 {
font-size: 5rem;
color: #DBEDF3;
font-family: "Arvo", cursive;
text-shadow: 3px 0 #DA0463;
}
footer {
color: #DBEDF3;
font-family: sans-serif;
}
.w {
}
.a {
}
.s {
}
.d {
}
.j {
}
.k {
}
.l {
}
.set {
margin: 10% auto;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.pressed {
box-shadow: 0 3px 4px 0 #DBEDF3;
opacity: 0.5;
}
.red {
color: red;
}
.drum {
outline: none;
border: 10px solid #404B69;
font-size: 5rem;
font-family: 'Arvo', cursive;
line-height: 2;
font-weight: 900;
color: #DA0463;
text-shadow: 3px 0 #DBEDF3;
border-radius: 15px;
display: inline-block;
width: 150px;
height: 150px;
text-align: center;
margin: 10px;
background-color: white;
}
And this is my index Java file:
var numberOfDrumButtons = document.querySelectorAll(".drum").length;
for (var i = 0; i<numberOfDrumButtons; i++); {
document.querySelectorAll(".drum")[i].addEventListener("click",function () {
alert("I got clicked!");
)};
}
I keep getting errors in the console saying that the ) bracket is missing in the 7th line when I put in the ) and when I don't, it says expected ) on line 7