Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติของ null ที่ getElementById() ได้อย่างไร
“ Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติของ null ที่ getElementById() ” อาจเกิดขึ้นได้จากสาเหตุต่อไปนี้:
ตัวอย่างที่ 1: การเกิดขึ้นของ Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติของ null ที่ getElementById() เนื่องจากการเข้าถึงองค์ประกอบก่อนหน้า
ในตัวอย่างนี้ ข้อผิดพลาดที่พบเนื่องจากการเข้าถึงองค์ประกอบเฉพาะก่อนที่จะระบุจะถูกกล่าวถึง:
< สคริปต์ >
เอกสาร. getElementById ( 'ศีรษะ' ) . HTML ภายใน = 'เนื้อหาจาวาสคริปต์' ;
สคริปต์ >
< ศูนย์กลาง >< ร่างกาย >
< รหัส h2 = 'ศีรษะ' > เว็บไซต์ Linuxint ชั่วโมง2 >
ร่างกาย > ศูนย์กลาง >
ใช้ขั้นตอนต่อไปนี้ตามที่ระบุในโค้ดด้านบน:
- ประการแรก รวมบล็อกรหัส JavaScript ภายใน “ <สคริปต์> ” แท็ก
- ที่นี่ เข้าถึงองค์ประกอบที่สอดคล้องกับที่ระบุไว้ “ รหัส ' ใช้ ' getElementById() ' กระบวนการ.
- นอกจากนี้ ให้ใช้ “ HTML ภายใน คุณสมบัติ ” เพื่ออัปเดตเนื้อหาขององค์ประกอบที่เข้าถึง
- ในโค้ด HTML ภายใน “ <เนื้อหา> แท็ก ” รวมหัวเรื่องที่ระบุ “ รหัส '.
- เมื่อรันโค้ด ข้อผิดพลาดประเภท “ ไม่สามารถตั้งค่าคุณสมบัติของ null ที่ getElementById() ” จะเกิดขึ้น ทั้งนี้เพราะองค์ประกอบ “ ” ถูกเข้าถึงก่อนที่จะมีการระบุด้วยซ้ำ
เอาต์พุต
ในเอาต์พุตด้านบน จะเห็นได้ว่าข้อผิดพลาดที่ระบุแสดงขึ้นเนื่องจากการเข้าถึงองค์ประกอบก่อนหน้า
สารละลาย
ข้อผิดพลาดที่พบข้างต้นในกรณีนี้สามารถแก้ไขได้โดยจัดลำดับรหัสให้ระบุองค์ประกอบก่อนที่จะเข้าถึง
ตัวอย่างต่อไปนี้แสดงแนวคิดที่ระบุไว้:
< ศูนย์กลาง >< ร่างกาย >< รหัส h2 = 'ศีรษะ' > เว็บไซต์ Linuxint ชั่วโมง2 >
ร่างกาย > ศูนย์กลาง >
< สคริปต์ >
เอกสาร. getElementById ( 'ศีรษะ' ) . HTML ภายใน = 'เนื้อหาจาวาสคริปต์' ;
สคริปต์ >
โค้ดด้านบนจะเหมือนกับโค้ดก่อนหน้าโดยมีการเปลี่ยนแปลงตำแหน่งของบล็อคโค้ด มันเป็นเช่นนั้นเองที่ “ ” องค์ประกอบถูกระบุก่อนที่จะเข้าถึงในรหัส JavaScript
เอาต์พุต
เท่าที่เห็น ข้อผิดพลาดที่พบได้รับการแก้ไขและเนื้อหาที่อัปเดตผ่านทาง “ HTML ภายใน ” แสดงคุณสมบัติ
ตัวอย่างที่ 2: การเกิดขึ้นของ Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติของ null ที่ getElementById() เนื่องจากการเข้าถึง Id ไม่ถูกต้อง
นอกจากนี้ยังสามารถพบข้อผิดพลาดที่ระบุโดยการเข้าถึง id ไม่ถูกต้อง
มาดูตัวอย่างที่ระบุไว้ด้านล่าง:
< รหัสกระโจม = 'สำหรับ' > ชวา กระโจม >< ประเภทสคริปต์ = 'ข้อความ/จาวาสคริปต์' >
เอกสาร. getElementById ( '#สำหรับ' ) . ข้อความภายใน = 'สคริปต์' ;
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- รวม ' <กระโจม> ” องค์ประกอบที่มีข้อความว่า “ รหัส ” และค่าข้อความ
- ในส่วน JS ของโค้ด ให้เข้าถึงองค์ประกอบที่รวมอยู่ในขั้นตอนก่อนหน้าโดยใช้ปุ่ม ' getElementById() ' กระบวนการ.
- “ รหัส ” รูปแบบที่นี่ไม่ถูกต้อง เมื่อพิจารณาถึงวิธีการเข้าถึงองค์ประกอบเฉพาะ
- ที่นี่ “ ข้อความภายใน คุณสมบัติ ” แสดงค่าข้อความที่ระบุ
เอาต์พุต
ในเอาต์พุตนี้ สามารถตรวจสอบได้ว่าคุณสมบัติที่ใช้ไม่ส่งผลกระทบต่อองค์ประกอบเนื่องจากรูปแบบรหัสไม่ถูกต้อง
สารละลาย
ข้อผิดพลาดที่กล่าวถึงในสถานการณ์เฉพาะนี้สามารถแก้ไขได้โดยการระบุรหัสให้ถูกต้องขณะเข้าถึงองค์ประกอบ:
< รหัสกระโจม = 'สำหรับ' > ชวา กระโจม >< ประเภทสคริปต์ = 'ข้อความ/จาวาสคริปต์' >
เอกสาร. getElementById ( 'สำหรับ' ) . ข้อความภายใน = 'สคริปต์' ;
สคริปต์ >
ใช้ขั้นตอนที่ระบุไว้ด้านล่างตามที่ระบุไว้ในโค้ดด้านบน:
- รวมถึง “ <กระโจม> ” องค์ประกอบที่กำหนดให้ “ รหัส '.
- ในข้อมูลโค้ด JavaScript ให้เข้าถึงองค์ประกอบในขั้นตอนก่อนหน้าโดยระบุองค์ประกอบ “ รหัส ” อย่างถูกต้องผ่านทาง “ getElementById() ' กระบวนการ.
- สุดท้าย ใช้ “ ข้อความภายใน คุณสมบัติ ” และแสดงเนื้อหาข้อความที่ระบุซึ่งจะได้รับการปรับปรุงในกรณีนี้
เอาต์พุต
ในเอาต์พุตด้านบน จะเห็นได้ว่ามีการแสดงเนื้อหาข้อความที่อัปเดตแล้ว
บทสรุป
“ Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติของ null ที่ getElementById() ” ใน JavaScript สามารถแก้ไขได้โดยระบุองค์ประกอบก่อนเข้าถึงหรือระบุรหัสในรูปแบบที่ถูกต้อง หลังจากดำเนินการดังกล่าวแล้ว ฟังก์ชันการทำงานที่เกี่ยวข้องสามารถดำเนินการได้ในทั้งสองกรณี บล็อกนี้แนะนำเกี่ยวกับการแก้ไข Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติของ null ที่ getElementById() ใน JavaScript