Change language
Python.Engineering Wiki Setproperty Javascript

Setproperty Javascript

code Python module | COM PHP module | Ctype PHP module | dis Python module | Ev PHP module | GD PHP module | html Python module | http Python module | imp Python module | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | sched Python module | select Python module | sep | site Python module | SPL PHP module | StackOverflow | string Python module | struct Python module | time Python module | UI PHP module | uu Python module
Michael Zippo Michael Zippo 04.11.2021

La proprietà innerHTML ti consente di impostare il contenuto di un elemento utilizzando JavaScript.

Se specifichi un valore non valido elemento con cui utilizzare il metodo innerHTML o se posizioni lo script prima che l’elemento venga visualizzato nella pagina, incontrerai l’errore "Uncaught TypeError: impossibile impostare la proprietà ‚ÄòinnerHTML‚Äô di nullo" errore.

In questa guida, discutiamo cosa significa questo errore e perché potresti riscontrarlo. Esamineremo un esempio di questo errore in modo che tu possa imparare a risolverlo nel tuo codice JavaScript.

Uncaught TypeError: impossibile impostare la proprietà ‚ÄòinnerHTML‚Äô of null

La proprietà innerHTML è associata a qualsiasi elemento web con cui stai lavorando in JavaScript. Potresti aver selezionato un elemento web dalla pagina utilizzando un "getter" come getElementById(), oppure potresti aver creato un elemento in JavaScript che desideri modificare.

Il "non può imposta la proprietà ‚ÄòinnerHTML‚Äô di nullo" errore è un errore di tipo. Ciò significa che stiamo cercando di applicare una proprietà o una funzione a un valore che non supporta una proprietà o una funzione.

In questo caso, stiamo cercando di impostare il valore di innerHTML su un elemento uguale a null. I valori null non hanno una proprietà innerHTML.

Ci sono due cause comuni di questo errore:

  • Inserimento di uno script prima che un elemento appaia sul pagina web
  • Fare riferimento all’ID dell’elemento sbagliato.

Analizzeremo la prima causa, che è probabilmente l’errore più comune commesso dai principianti.

Uno scenario di esempio

Stiamo per scrivere un semplice sito web che mostra l’ora. Per iniziare, definisci una pagina HTML di base. Questa pagina HTML sarà la tela su cui visualizziamo l’ora:

Questa pagina HTML contiene un tag e un tag . Il tag contiene un tag 

</pre></code> che definisce il titolo della pagina web. Il tag <code><body></code> contiene un paragrafo.<br></p> </a ></div><p>All’interno del paragrafo, abbiamo aggiunto un <a href="/html-span/">tag <span></a>. Sostituiremo il contenuto di questo tag con l’ora corrente nel nostro codice JavaScript.<br></p> <p>Quindi, scrivi uno script per recuperare l’ora. Aggiungeremo questo codice JS all’interno del tag <code><head></code>:</p>  <p>Il nostro documento ora contiene HTML e JavaScript. Il metodo <code>getElementById()</code> recupera il nostro tag span <code>show_time</code>. Recuperiamo quindi la data corrente utilizzando il <ah ref="/javascript-date/">Modulo JavaScript Date</a>.<br></p> <p>Nella riga di codice successiva, creiamo una stringa che visualizza l’ora corrente del giorno e i minuti dell’ora. Questa stringa utilizza la seguente struttura:</p> <p><code>HH:MM</code></p><p>Sono presenti due punti che separano i valori dell’ora e dei minuti. Creiamo questa stringa utilizzando una tecnica chiamata <a href="/javascript-string-interpolation/">interpolazione di stringhe JavaScript</a>. Questo ci consente di incorporare più valori nella stessa stringa. Infine, utilizziamo il metodo innerHTML per visualizzare questa volta sulla nostra pagina web.<br></p> <p>Apriamo la nostra pagina web nel browser web:<br></p> <figure class= "wp-block-image"> <img src = "https://lh6.googleusercontent.com/anZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU-YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ_qdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw" alt = "AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw"> </ figure> <p>la nostra pagina web non riesce a visualizzare l’ora . Se osserviamo la console JavaScript, possiamo vedere un errore:<br></p>  <p>Questa è un’altra rappresentazione della proprietà "impossibile impostare ‚Äòinnerhtml‚Äô di nullo". Ci dice che l’elemento su cui stiamo cercando di impostare il valore di innerHTML è null.</p> <h2>La soluzione</h2> <p>Poiché il valore di <code>show_time</code> è null, possiamo dedurre che JavaScript non è stato in grado di recuperare correttamente l’elemento il cui ID è <code>show_time</code>.<br></p> <p>In questo caso, la causa è che abbiamo inserito il nostro <code>< ;script></code> troppo presto nel nostro programma. Il nostro tag <code> ‚Ķ</pre></div> <p>Abbiamo spostato il nostro tag <code> </div> <h2>Conclusione</h2> <p>L’errore "Uncaught TypeError: impossibile impostare la proprietà ‚ÄòinnerHTML‚Äô di nullo" l’errore è causato dal tentativo di impostare un valore innerHTML per un elemento il cui valore è uguale a null. <br></p> <p>Per risolvere questo errore, assicurati che il tuo <code><script></code> tag viene dopo l’elemento che vuoi selezionare nel tuo script. Se questo non risolve il problema, assicurati di selezionare un elemento valido nel tuo programma.</p>