I am trying to add a class named pressed to an element with class named w. This will happen when user clicks on element containing class w. I then want to remove the class press after delay of 100.So this is the code I have writtten.
(In short: I am trying to add animation with js by adding(and then removing after 100ms) a CSS class pressed.)
But this is not working, it's behavior is as follows:
- When I un-comment this part
setTimeout(foo(this.innerText), 100);
even thedocument.querySelector("." this.innerText).classList.add("pressed");
isn't getting executed.
document.querySelector('.w').addEventListener("click",function () {
document.querySelector("." this.innerText).classList.add("pressed");
// setTimeout(foo(this.innerText), 100);
});
function foo(stringclass) {
document.querySelector("." stringclass).classList.remove("pressed");
console.log(stringclass);
}
Can anyone help me with this please?
HTML Code
<!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