Ciao, prova a verificare nella console web del tuo browser e vedi cosa salta fuori. Per aprire la console premi F12 o guarda nel menu strumenti.
In teoria stai sbagliando diverse cose:
- La funzione elementsByTagName non esiste, dovrebbe essere getElementsByTagName;
- Il nome dell'evento non è keyDown ma keydown (occhio a minuscole e maiuscole, JavaScript è un linguaggio case-sensitive);
- Non puoi applicare un gestore dell'evento keydown ad un elemento che non è selezionabile. Quel generico div non lo è. Potresti renderlo selezionabile specificando l'attributo tabindex="0" direttamente sul tag, oppure potresti semplicemente applicare il gestore direttamente sull'oggetto document.
Altre cose:
- meglio che il tag <style> sia inserito dentro <head> e non nel <body>;
- per un migliore debug ti consiglio di usare la console web e la funzione console.log() con cui puoi mostrare degli output sulla console, piuttosto che alert().
Esempio:
codice:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script>
function main(){
document.getElementsByTagName("div")[0].addEventListener("keydown", function(e){
console.log(e.key); // verifica l'output nella console web
})
}
</script>
<style>
div {width:400px; height:400px; border:solid black;}
</style>
</head>
<body onload="main()"></body>
<div tabindex="0"></div>
</body>
</html>
Permessi di invio
Rispondi quotando