Paano Nagaganap ang Uncaught TypeError: Hindi maaaring magtakda ng mga katangian ng null sa getElementById()?
Ang ' Uncaught TypeError: Hindi maitakda ang mga katangian ng null sa getElementById() ” ay maaaring mangyari para sa mga sumusunod na dahilan:
Halimbawa 1: Pagkakaroon ng Uncaught TypeError: Hindi maitakda ang mga katangian ng null sa getElementById() dahil sa Naunang Pag-access ng Element
Sa halimbawang ito, tatalakayin ang error na naranasan dahil sa pag-access ng partikular na elemento bago ito tukuyin:
< iskrip >
dokumento. getElementById ( 'ulo' ) . innerHTML = 'Nilalaman ng JavaScript' ;
iskrip >
< gitna >< katawan >
< h2 id = 'ulo' > Website ng Linuxhint h2 >
katawan > gitna >
Ilapat ang mga sumusunod na hakbang, tulad ng ibinigay sa itaas na mga linya ng code:
- Una, isama ang JavaScript code block sa loob ng “ ” tag.
- Dito, i-access ang elementong naaayon sa nakasaad na “ id ' gamit ang ' getElementById() ” paraan.
- Gayundin, ilapat ang ' innerHTML ” property upang i-update ang nilalaman ng na-access na elemento.
- Sa HTML code sa loob ng “
'tag, isama ang isang heading na may tinukoy na ' id ”. - Sa pag-execute ng code, ang uri ng error na ' Hindi maitakda ang mga katangian ng null sa getElementById() ” magaganap. Ito ay dahil ang elementong ' ” ay naa-access bago pa man ito matukoy.
Output
Sa output sa itaas, makikita na ang nakasaad na error ay ipinapakita dahil sa paunang pag-access sa elemento.
Solusyon
Ang error na nasa itaas sa kasong ito ay maaaring malutas sa pamamagitan ng pagkakasunud-sunod ng code upang ang elemento ay tinukoy bago ito ma-access.
Ang sumusunod na halimbawa ay naglalarawan ng nakasaad na konsepto:
< gitna >< katawan >< h2 id = 'ulo' > Website ng Linuxhint h2 >
katawan > gitna >
< iskrip >
dokumento. getElementById ( 'ulo' ) . innerHTML = 'Nilalaman ng JavaScript' ;
iskrip >
Ang code sa itaas ay kapareho ng nakaraang code na may pagbabago sa paglalagay ng mga bloke ng code. Ito ay tulad na ang ' ” elemento ay tinukoy bago ito ma-access sa JavaScript code.
Output
Tulad ng nakikita, ang nakatagpo na error ay nalutas, at ang na-update na nilalaman sa pamamagitan ng ' innerHTML ” property ay ipinapakita.
Halimbawa 2: Pagkakaroon ng Uncaught TypeError: Hindi maitakda ang mga katangian ng null sa getElementById() dahil sa Maling Pag-access ng Id
Ang nakasaad na error ay maaari ding makatagpo sa pamamagitan ng hindi tamang pag-access sa id.
Tingnan natin ang nakasaad sa ibabang halimbawa:
< marquee id = 'para sa' > Java marquee >< uri ng script = 'text/javascript' >
dokumento. getElementById ( '#for' ) . innerText = 'Script' ;
iskrip >
Sa snippet ng code sa itaas:
- Isama ang isang ' 'elemento na may nakasaad na' id ” at halaga ng teksto.
- Sa bahagi ng JS ng code, i-access ang kasamang elemento sa nakaraang hakbang gamit ang “ getElementById() ” paraan.
- Ang ' id ” format dito ay hindi tama, isinasaalang-alang ang paraan para sa pag-access sa partikular na elemento.
- Dito, ang ' innerText ” property ay nagpapakita ng nakasaad na halaga ng teksto.
Output
Sa output na ito, mabe-verify na hindi naapektuhan ng inilapat na property ang elemento dahil sa maling format ng id.
Solusyon
Ang nabanggit na error sa partikular na sitwasyong ito ay maaaring malutas sa pamamagitan ng pagtukoy ng id nang tama habang ina-access ang elemento:
< marquee id = 'para sa' > Java marquee >< uri ng script = 'text/javascript' >
dokumento. getElementById ( 'para sa' ) . innerText = 'Script' ;
iskrip >
Ipatupad ang mga hakbang na nakasaad sa ibaba, gaya ng nakasaad sa code sa itaas:
- Isama ang ' 'elemento na may ibinigay na' id ”.
- Sa snippet ng code ng JavaScript, i-access ang elemento, sa nakaraang hakbang sa pamamagitan ng pagtukoy sa ' id ” nang tama sa pamamagitan ng “ getElementById() ” paraan.
- Panghuli, ilapat ang ' panloob na Teksto ” property at ipakita ang nakasaad na text content, na ia-update sa kasong ito.
Output
Sa output sa itaas, maaaring makita na ang na-update na nilalaman ng teksto ay ipinapakita.
Konklusyon
Ang ' Uncaught TypeError: Hindi maitakda ang mga katangian ng null sa getElementById() ” sa JavaScript ay maaaring malutas sa pamamagitan ng pagtukoy sa elemento bago ito i-access o sa pamamagitan ng pagtukoy ng id sa tamang format. Pagkatapos gawin ito, ang kaukulang mga pag-andar ay maaaring isagawa sa parehong mga kaso. Ginabayan ng blog na ito ang tungkol sa paglutas ng Uncaught TypeError: Hindi makapagtakda ng mga katangian ng null sa getElementById() sa JavaScript.