setproperty Javascript

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

Met de innerHTML-eigenschap kunt u de inhoud van een element definiëren met JavaScript.

Als u een ongeldige elementwaarde opgeeft waarmee u de innerHTML-methode kunt gebruiken of als u het script plaatst voordat het element op de pagina wordt weergegeven, ziet u de fout "Uncaught TypeError: Unable to set the "innerHTML" null "property . error

In deze handleiding bespreken we wat deze fout betekent en waarom u deze kunt tegenkomen. We zullen een voorbeeld van deze fout bekijken, zodat u kunt leren hoe u deze in uw JavaScript kunt oplossen

Uncaught TypeError:. Kan eigenschap "innerHTML" niet op null instellen

De eigenschap InnerHTML is gekoppeld aan een webelement waarmee u met JavaScript werkt. Je hebt een webelement van de pagina geselecteerd met een "getter" , zoals getElementById () , of je hebt een element in JavaScript gemaakt dat je wilt wijzigen.

"Kan eigenschap `innerHTML` niet op null instellen" is een typefout. Dit betekent dat we proberen een eigenschap of functie toe te passen op een waarde die geen eigenschap of functie ondersteunt.

In dit geval proberen we de waarde van innerHTML in te stellen op een gelijk element . NUL. NULL-waarden ‚Äã‚Äãzijn geen innerHTML-eigenschap

Er zijn twee veelvoorkomende oorzaken van deze fout.

  • Een script invoegen voordat een item op de webpagina verschijnt
  • Verwijs naar de verkeerde item-ID.

We gaan de hoofdoorzaak analyseren, wat waarschijnlijk de meest voorkomende fout is die beginners maken.

een voorbeeldscenario

We gaan een eenvoudige site schrijven die de tijd aangeeft. Definieer om te beginnen een eenvoudige HTML-pagina. Deze HTML-pagina zal het canvas zijn waarop we het weer weergeven:

Deze HTML-pagina bevat een en . De tag bevat een

</pre></code> die de titel van de webpagina definieert. De <code><body></code> bevat een alinea</p> </a> </div> <p>in paragraaf hebben we een <a href="/html-span/"> <span> </a>. we zullen de inhoud van deze tag vervangen door de huidige tijd in onze JavaScript-code</p><p>Schrijf vervolgens een script om de tijd op te halen, we zal deze JS-code toevoegen aan de <code><head> </code>: ..</p> <p>Ons document bevat nu HTML en JavaScript. <code>getElementById ()</code> krijgt onze spa n tag <code>SHOW_TIME</code>. Vervolgens halen we de huidige datum op met behulp van de tag <ah ref = "/ JavaScrip t-Date/">JavaScript-module date </a> .</p><p>In de volgende coderegel maken we een tekenreeks die wordt weergegeven het huidige uur van de dag en de minuten van het uur. Deze tekenreeks gebruikt de volgende structuur:</p><p><code>UU: MM</code></p><p>Er zijn twee punten die de waarden ‚Äã‚Äãvoor uren en minuten scheiden. We maken deze string met behulp van een techniek genaamd <a href="/javascript-string-interpolation/"> JavaScript string interpolation </a>. Dit stelt ons in staat om meerdere waarden ‚Äã‚Äãin dezelfde keten te integreren. Ten slotte gebruiken we de innerHTML-methode om deze tijd op onze webpagina weer te geven</p><p>de pagina van ons web geopend Let in de webbrowser.</p><figure class = `wp- the picture block-` > <img src = "https://lh6.googleusercontent.com/anZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU-YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ_qdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw "alt =" AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw"> </ figuur> <p> onze website kan de tijd weer te geven. Als we kijken naar de JavaScript-console, we kunnen een fout zien:</p> <p> Dit is een andere weergave van de "kan de eigenschap `innerHTML` niet op null zetten". Het vertelt ons dat het element waarop we de waarde van innerHTML proberen in te stellen nul is.</p><h2>De oplossing</h2><p>Aangezien de waarde van <code>SHOW_TIME</code> nul is, kunnen we afleiden dat JavaSc ript kon het element met de ID <code>SHOW_TIME</code> niet correct ophalen.</p><p>In dit geval is de oorzaak dat we onze <code><; script></code> te vroeg in ons schema . Onze <code> ... </pre> </div> <p>We hebben onze <code> </div> <h2>Conclusie</h2><p>De fout "Uncaught TypeError: Unable to set property `innerHTML` null" De fout wordt veroorzaakt wanneer wordt geprobeerd een innerHTML-waarde in te stellen voor een element waarvan de waarde is gelijk aan nul.</p><p>Om deze fout te corrigeren, moet u ervoor zorgen dat uw <code><script></code> na het element komt dat u in uw script wilt selecteren.Als dit het probleem niet oplost, zorg ervoor dat u een geldig item in uw programma selecteert.</p>