Estoy tratando de agregar una clase llamada pressed a un elemento con una clase llamada w . Esto sucederá cuando el usuario haga clic en el elemento que contiene la clase w . Luego quiero eliminar la prensa de clase después de un retraso de 100. Así que este es el código que he escrito.
(En resumen: estoy tratando de agregar animación con js agregando (y luego eliminando después de 100 ms) una clase CSS presionada ).
Pero esto no funciona, su comportamiento es el siguiente:
setTimeout(foo(this.innerText), 100); incluso el document.querySelector("."+this.innerText).classList.add("pressed"); no se está ejecutando. 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); }¿Puede alguien ayudarme con esto, por favor?
código HTML
<!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> </div> <script src="index.js" charset="utf-8"></script> </body> </html>Clase CSS
.pressed { box-shadow: 0 15px 40px 0 #DBEDF3; opacity: 0.5; }setTimeout(foo(this.innerText), 100); ejecuta foo inmediatamente. Necesitas pasar la función en sí. Creo que quieres algo más parecido a document.querySelector('.w').addEventListener("click",function (e) { document.querySelector("."+e.target.innerText).classList.add("pressed"); setTimeout(function() {foo(e.target.innerText)}, 100); });