Spostare un div con i tasti di direzione

**Gas75** · 30-11-2021, 12:54

Salve, avevo sviluppato un codice per spostare un certo div nella pagina web usando i tasti di direzione e i relativi keyCode:

codice:

function sposta() {
    var x = screen.availWidth;
    var y = screen.availHeight;
    var tasto = window.event.keyCode;
    var sinistra = document.getElementById("blocco").style.left;
    var sopra = document.getElementById("blocco").style.top;
    // seguono gli if sulla variabile tasto e sulla posizione di "blocco" per evitare che esca dalla schermata
}

Funziona perfettamente, sto cercando di convertirlo con addEventListener, ma oltre a non funzionare, la console mi rileva un errore nella lettura di uno style che vede null e che invece è perfettamente definito in CSS (infatti nella versione con sposta() non ho problemi!

codice:

var x = screen.availWidth;
var y = screen.availHeight;
document.addEventListener("keypress", logKey);
function logKey(e) {
    var tasto = e.keyCode;
}
var sinistra = document.getElementById("blocco").style.left; // errore indicato qui
var sopra = document.getElementById("blocco").style.top;
// seguono gli if identici al caso precedente

Dove sbaglio?

**KillerWorm** · 30-11-2021, 17:48

Ciao, da quello che vedo, parte di quello script che stava dentro la funzione (che prima era sposta()), ora lo hai portato fuori dalla funzione (che ora è logKey()).

Nel secondo script infatti hai chiuso la funzione subito dopo la prima riga di script, lasciando fuori tutto il resto.

Sei sicuro che non sia necessario inserire, dentro la funzione logKey(), tutto lo script come era prima per sposta()?

In quello script infatti ci sono dei metodi getElementById che puoi usare solo se gli elementi selezionati (nel tuo caso l'elemento "blocco") sono creati e disponibili sulla pagina.

la console mi rileva un errore nella lettura di uno style che vede null e che invece è perfettamente definito in CSS

Lasciamo stare il "definito in CSS" che non ha attinenza in questo caso, a meno che non ho capito a cosa ti riferisci.

Presumo che quell'errore non ti stia segnalando il null per lo style ma piuttosto per quel metodo getElementById che restituisce, appunto, "null" se non trova l'elemento specificato.

Tenendo ben chiaro che l'ordine di lettura di un documento va normalmente dall'alto verso il basso, sia per gli elementi HTML nella costruzione del DOM, sia per lo script presente nello stesso documento, che viene letto ed eseguito istantaneamente (a meno che non si tratti di funzioni eseguite in modo asincrono, come dovrebbe essere il caso tuo).

In altre parole, se lo script, con quel getElementById, cerca di selezionare un elemento ancora non disponibile (perché non esiste o perché si trova oltre quello script stesso), restituisce "null". Va da sé che "style", non essendo una proprietà di "null", genera un errore.

Se pensi non sia così, ti chiedo di riportare "esattamente" il testo dell'errore che ricevi in console.

Ad ogni modo, da quel poco che hai indicato, ho il sospetto che sia proprio così.

Per risolvere puoi inserire, il resto dello script, all'interno della funzione logKey(), come era per sposta().

Se invece ritieni che quello script (quantomeno i metodi che manipolano gli elementi del DOM) debba stare fuori da quella funzione, assicurati che lo script stesso sia letto (e quindi eseguito) solo dopo la creazione di tali elementi. Ci sono diversi metodi per fare questo, uno è quello di inserire lo script solo alla fine del <body>, così da avere la certezza che tutti gli elementi del DOM sono stati letti, creati. e quindi sono disponibili per la manipolazione via script.

Fai sapere.

**Gas75** · 01-12-2021, 12:07

Ciao, in effetti il messaggio di errore era dovuto all'aver messo molte istruzioni fuori da logKey(), in secondo luogo keypress è deprecato, va usato keydown.
Con queste correzioni, il codice funziona senza intoppi, anche con i tasti freccia.
Grazie.

**KillerWorm** · 01-12-2021, 13:50

Bene

buon proseguimento

Discussione: Spostare un div con i tasti di direzione

Strumenti discussione

Ricerca discussione

Visualizza

Spostare un div con i tasti di direzione

Tag per questa discussione

Permessi di invio