Hur uppstår Uncaught TypeError: Kan inte ställa in egenskaper för null vid getElementById()?
den ' Uncaught TypeError: Kan inte ställa in egenskaperna för null vid getElementById() ” kan uppstå av följande skäl:
Exempel 1: Förekomst av Uncaught TypeError: Kan inte ställa in egenskaperna för null vid getElementById() på grund av föregående åtkomst av element
I det här exemplet kommer felet som uppstår på grund av åtkomst av det specifika elementet innan det specificeras att diskuteras:
< manus >
dokumentera. getElementById ( 'huvud' ) . innerHTML = 'JavaScript-innehåll' ;
manus >
< Centrum >< kropp >
< h2 id = 'huvud' > Linuxhint webbplats h2 >
kropp > Centrum >
Tillämpa följande steg, som anges i kodraderna ovan:
- Inkludera först JavaScript-kodblocket i ' '-tagg.
- Här kommer du åt elementet som motsvarar det angivna ' id ' använda ' getElementById() 'metoden.
- Använd också ' innerHTML ”-egenskap för att uppdatera innehållet i det accessade elementet.
- I HTML-koden i '
'-taggen, inkludera en rubrik med den angivna ' id ”. - När koden körs visas typfelet ' Kan inte ställa in egenskaper för null på getElementById() ” kommer att inträffa. Detta beror på att elementet ' ” nås innan den ens har specificerats.
Produktion
I ovanstående utgång kan det ses att det angivna felet visas på grund av tidigare åtkomst till elementet.
Lösning
Det ovan påträffade felet i detta fall kan lösas genom att sekvensera koden så att elementet specificeras innan det nås.
Följande exempel illustrerar det angivna konceptet:
< Centrum >< kropp >< h2 id = 'huvud' > Linuxhint webbplats h2 >
kropp > Centrum >
< manus >
dokumentera. getElementById ( 'huvud' ) . innerHTML = 'JavaScript-innehåll' ;
manus >
Ovanstående kod är identisk med den tidigare koden med ändringen i placeringen av kodblock. Det är sådant att ' ”-elementet anges innan det nås i JavaScript-koden.
Produktion
Som sett är det påträffade felet löst och det uppdaterade innehållet via ' innerHTML ” egenskapen visas.
Exempel 2: Förekomst av Uncaught TypeError: Kan inte ställa in egenskaperna för null vid getElementById() på grund av felaktig åtkomst av Id
Det angivna felet kan också påträffas genom att man använder id:t felaktigt.
Låt oss gå igenom nedanstående exempel:
< tält-id = 'för' > Java tält >< skripttyp = 'text/javascript' >
dokumentera. getElementById ( '#för' ) . innerText = 'Manus' ;
manus >
I kodavsnittet ovan:
- Inkludera en '
' element med det angivna ' id ” och textvärde. - I JS-delen av koden kommer du åt det inkluderade elementet i föregående steg med hjälp av ' getElementById() 'metoden.
- den ' id ” formatet här är inte korrekt, med tanke på metoden för att komma åt det specifika elementet.
- Här, ' innerText ”-egenskapen visar det angivna textvärdet.
Produktion
I denna utdata kan det verifieras att den tillämpade egenskapen inte påverkade elementet på grund av felaktigt id-format.
Lösning
Det nämnda felet i det här specifika scenariot kan lösas genom att ange id korrekt när du kommer åt elementet:
< tält-id = 'för' > Java tält >< skripttyp = 'text/javascript' >
dokumentera. getElementById ( 'för' ) . innerText = 'Manus' ;
manus >
Implementera stegen nedan, som anges i ovanstående kod:
- Inkludera '
' element som har den givna ' id ”. - I JavaScript-kodavsnittet, gå till elementet i föregående steg genom att ange elementets ' id ' korrekt via ' getElementById() 'metoden.
- Till sist, tillämpa ' innerText ” egenskapen och visa det angivna textinnehållet, som kommer att uppdateras i detta fall.
Produktion
I ovanstående utdata kan det visualiseras att det uppdaterade textinnehållet visas.
Slutsats
den ' Uncaught TypeError: Kan inte ställa in egenskaperna för null vid getElementById() ” i JavaScript kan lösas genom att ange elementet innan du kommer åt det eller genom att ange id i rätt format. Efter att ha gjort det kan motsvarande funktioner exekveras i båda fallen. Den här bloggen vägledde hur man löser Uncaught TypeError: Kan inte ställa in egenskaperna för null vid getElementById() i JavaScript.