Actualmente estoy haciendo el curso de desarrollo web de Angela Yu. Sin embargo, hay una cosa en la que estoy atascado. En la sección 13, presenta los detectores de eventos. Sin embargo, cuando trato de hacer clic en el botón "W", no aparece ningún cuadro de alerta. Sé que el archivo JavaScript está correctamente conectado con el archivo HTML, ya que puedo hacer que aparezca una alerta simple cuando escribo alerta ("Hola mundo");. Además, cuando ejecuto los archivos completos de esta sección, funciona perfectamente. Estoy atascado en este pequeño paso.
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>Ortografía addEventListener correctamente a un lado
por favor delega
Haga clic en el fragmento antes de escribir
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>Cambie .addEventListsener a .addEventListener . Tu resto del código es correcto.
Si desea aplicar un evento para presionar una tecla como W shift up down ... entonces use algo como esto en el fragmento a continuación
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>