setproperty JavaScript

| | | | | | | | | | | | | | | | | | | | | | | | |

Właściwość innerHTML umożliwia zdefiniowanie zawartości elementu za pomocą JavaScript.

Jeśli określisz nieprawidłową wartość elementu za pomocą której należy użyć metody innerHTML lub jeśli umieścisz skrypt przed wyświetleniem elementu na stronie, napotkasz błąd „Uncaught TypeError: Unable to set the „innerHTML” null „property . błąd

W tym przewodniku omawiamy, co oznacza ten błąd i dlaczego możesz go napotkać. Przyjrzymy się przykładowi tego błędu, aby dowiedzieć się, jak go naprawić w swoim JavaScript

Uncaught TypeError:. Nie można ustawić właściwości „innerHTML” na wartość null

Właściwość InnerHTML jest połączona z dowolnym elementem sieci, w którym pracujesz z JavaScript. Wybrałeś element sieciowy ze strony za pomocą „gettera” , takiego jak getElementById () , lub utworzyłeś element w JavaScript, który chcesz zmodyfikować.

Błąd „Nie można ustawić właściwości „innerHTML” na wartość null” jest błędem typu. Oznacza to, że próbujemy zastosować właściwość lub funkcję do wartości, która nie obsługuje właściwości lub funkcji.

W tym przypadku próbujemy ustawić wartość innerHTML na równy element . ZERO. Wartości NULL „Ęã”Ęã nie są właściwością innerHTML

Istnieją dwie powszechne przyczyny tego błędu.

  • Wstawianie skryptu przed pojawieniem się elementu na stronie internetowej
  • Odnieś się do niewłaściwego identyfikatora przedmiotu.

Przeanalizujemy główną przyczynę, która jest prawdopodobnie najczęstszym błędem popełnianym przez początkujących.

przykładowy scenariusz

Zamierzamy napisać prostą witrynę, która pokazuje czas. Aby rozpocząć, zdefiniuj podstawową stronę HTML . Ta strona HTML będzie kanwą, na której wyświetlimy pogodę:

Ta strona HTML zawiera i . Znacznik zawiera tag

</pre></code> definiujący tytuł strony internetowej. <code><body></code> zawiera akapit</p> </a> </div> <p>w akapicie dodaliśmy <a href="/html-span/"> <span> </a>. zastąpimy zawartość tego tagu aktualnym czasem w naszym kodzie JavaScript</p><p>Następnie napiszemy skrypt, aby pobrać czas, doda ten kod JS w <code><head> </code>: ..</p> <p>Nasz dokument zawiera teraz HTML i JavaScript. <code>getElementById ()</ kod> dostaje nasze spa n tag <code>SHOW_TIME</code>. Następnie pobieramy bieżącą datę za pomocą tagu <ah ref = "/ JavaScrip t-Date/">JavaScript module date </a> .</p><p>W poniższym wierszu kodu tworzymy ciąg, który wyświetla aktualna godzina dnia i minuty godziny. Ten ciąg ma następującą strukturę:</p><p><code>GG:MM</code></p><p>Istnieją dwa okresy, które oddzielają wartości „Ęã‚Ęãdla godzin i minut. Ciąg ten tworzymy za pomocą techniki zwanej <a href="/javascript-string-interpolation/"> interpolacją ciągów JavaScript </a>. To pozwala nam zintegrować wiele wartości w tym samym łańcuchu. Na koniec używamy metody innerHTML, aby wyświetlić tym razem na naszej stronie internetowej</p><p>stronę naszej sieci otwórz Let in the web browser.</p><figure class = `wp- blok obrazu-" > <img src = "https://lh6.googleusercontent.com/anZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU-YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ_qdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw "alt =" AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw"> </ figure> <p> Nasza strona internetowa nie może wyświetlać czas. Jeśli spojrzymy na konsoli JavaScript, widzimy błąd:</p> <p> Jest to kolejna reprezentacja „nie można ustawić właściwości „innerHTML” na wartość null”. Mówi nam ona, że element, na który próbujemy ustawić wartość innerHTML, wynosi zero.</p><h2>Rozwiązanie</h2><p>Ponieważ wartość <code>SHOW_TIME</code> wynosi zero, możemy wywnioskować, że JavaSc ript nie mógł poprawnie pobrać elementu, którego identyfikator to <code>SHOW_TIME</code>.</p><p>W tym przypadku przyczyną jest to, że wprowadziliśmy nasz <code><; script></code> zbyt wcześnie w naszym harmonogramie . Nasz <code> ... </pre> </div> <p>Przenieśliśmy nasz <code> </div> <h2>Wniosek</h2><p>Błąd „Nieprzechwycony błąd typu: nie można ustawić właściwości „innerHTML” null” Błąd pojawia się podczas próby ustawienia wartości innerHTML dla elementu, którego wartość jest równy zero.</p><p>Aby naprawić ten błąd, upewnij się, że <code><script></code> występuje po elemencie, który chcesz wybrać w skrypcie. Jeśli to nie rozwiąże problemu, pamiętaj, aby wybrać prawidłowy element w swoim programie.</p>