OK, bisognerebbe rivedersi un po' le basi. Facciamo un passo indietro... quando il browser "legge" un documento html, inizia dalla prima riga in alto fino all'ultima in basso, così come se tu leggessi riga per riga. Man mano che vengono letti i vari tag html, vengono creati di conseguenza i relativi oggetti, i cosiddetti elementi del DOM (Document Object Model, in italiano "modello a oggetti del documento") che restano appunto in memoria nella sessione corrente, relativa al documento stesso, e possono essere quindi manipolati da script.Non credo di aver ben capito. Gli elementi del DOM non vengono creati nell'html? Cioè la variabile img non è definita in html come f1 automaticamente? Scusami ma non riesco a entrare nel meccanismo
Ora JavaScript non può analizzare/manipolare un oggetto che ancora non è stato creato, cioè che non è presente nel DOM. Quando infatti si tenta di eseguire un qualche metodo (una qualsiasi funzione) che agisca su un qualsiasi oggetto non ancora creato (cioè non ancora presente nel DOM) si riceverà un errore e lo script non verrà eseguito.
Chiaramente ci sono diversi modi per lanciare lo script essendo sicuri che gli elementi interpellati siano stati creati, e risultino presenti nel DOM. Come già indicato sopra, bisogna capire quale sia il tuo scenario e quali le tue esigenze.
Se lo script è incluso direttamente nel documento puoi usare window.onload (eventualmente vedi la relativa documentazione, ad esempio qui) o provare a spostare semplicemente il blocco di script, compresi i tag <script> </script>, alla fine del body in modo da essere sicuri che gli elementi in questione siano stati creati e presenti nel DOM.
