เมธอด JavaScript getElementById เลือกองค์ประกอบจาก HTML Document Object Model (DOM) หากคุณสะกดวิธีนี้ไม่ถูกต้อง คุณจะพบ document.getElementByID is not a function ข้อผิดพลาดในโปรแกรมของคุณ
บทแนะนำนี้จะอธิบายความหมายของข้อผิดพลาดนี้และสาเหตุที่ทำให้เกิดข้อผิดพลาด เราจะอธิบายตัวอย่างข้อผิดพลาดนี้เพื่อให้คุณได้เรียนรู้สิ่งที่ต้องทราบเพื่อแก้ไข
document.getElementByID ไม่ใช่ฟังก์ชัน
document.getElementById() เมธอดเป็นหนึ่งในเมธอดตัวเลือก JavaScript วิธีการดึงวัตถุตาม ID จาก HTML DOM
วิธีนี้ใช้เพื่อจัดการเนื้อหาขององค์ประกอบหรือดึงข้อมูลเกี่ยวกับองค์ประกอบเฉพาะ เช่น เนื้อหาหรือคุณลักษณะขององค์ประกอบ
รหัสถูกกำหนดเป็น HTML รหัสต้องไม่ซ้ำกันสำหรับองค์ประกอบเฉพาะ:
<header id=“top_header”></header>
<header> แท็กมี ID top_header . รหัสนี้ไม่ซ้ำกับ <header> แท็ก มักใช้รหัสเพื่อใช้สไตล์กับองค์ประกอบเฉพาะโดยใช้ CSS
document.getElementById() คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ วิธีนี้ไม่ใช่:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
- document.getelementbyid()
- document.getElementByID()
- document.GetElementById()
JavaScript ไม่ยอมรับรูปแบบอื่นๆ ของชื่อเมธอด
แม้ว่าการเขียน ID ด้วยอักษรตัวพิมพ์ใหญ่เป็นเรื่องน่าดึงดูดเพราะเป็นคำย่อสำหรับคำอื่น วิธีการกำหนดให้คุณใช้ตัวพิมพ์ใหญ่ I และตัวพิมพ์เล็ก d .
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการ getElementById โปรดอ่านคำแนะนำเกี่ยวกับ JavaScript getElementById
ตัวอย่างสถานการณ์
เรากำลังจะสร้างข้อมูลโค้ดที่ยินดีต้อนรับผู้ใช้เข้าสู่แอปพลิเคชันของเรา ข้อความต้อนรับจะอยู่ในชื่อที่ปรากฏที่ด้านบนของหน้าของเรา
สำหรับจุดประสงค์ของตัวอย่างนี้ เราจะใช้ชื่อสาธิต
ในการเริ่มต้น ให้กำหนดโค้ด HTML เนื้อหาของเราสำหรับส่วนต้อนรับของหน้าเว็บ:
<html> <body> <header> <h1 id="welcome_title">Welcome</h1> </header> </body> </html>
โดยค่าเริ่มต้น <h1> . ของเรา แท็กจะมีเนื้อหา Welcome . <header> tag คือแท็กหลักที่ชื่อของเราตั้งอยู่ ต่อไป เราจะเพิ่ม <script> ใต้แท็ก
… </header> <script> </script> </body> ...
ภายในสคริปต์ของเรา เราจะเลือกชื่อและเปลี่ยนเนื้อหา:
var title = document.getElementByID("welcome_title");
title.textContent = "Welcome, Luke!";
getElementById() วิธีการเลือกชื่อของเรา เรากำหนดองค์ประกอบ HTML นี้ให้กับตัวแปร JavaScript ชื่อ title . เนื้อหาในชื่อเรื่องของเราจะถูกเปลี่ยนเป็น “ยินดีต้อนรับ ลุค!” เราใช้ textContent วิธีการเปลี่ยนชื่อ
เรียกใช้รหัสของเราและดูว่าเกิดอะไรขึ้น หากเราเปิดคอนโซล JavaScript เราจะเห็นข้อผิดพลาด:
รหัสของเราทำงานไม่ถูกต้อง ชื่อของเรายังไม่มีการเปลี่ยนแปลง:
การแก้ปัญหา
เราใช้กรณีที่ไม่ถูกต้องสำหรับ document.getElementByID ตัวเลือก แทนที่จะใช้ตัวพิมพ์ใหญ่ ฉัน และตัวพิมพ์เล็ก d เราใช้ตัวพิมพ์ใหญ่ ฉัน และ D .
JavaScript ไม่ได้ลงทะเบียนโปรแกรมของเราเป็นการเรียก getElementById ฟังก์ชันเนื่องจากชื่อฟังก์ชันต้องตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
เราจำเป็นต้องเปลี่ยนรหัสของเราเพื่อให้เราใช้ตัวพิมพ์ที่ถูกต้องสำหรับฟังก์ชันของเรา:
var title = document.getElementById("welcome_title");
title.textContent = "Welcome, Luke!";
เรากำลังใช้ Id แทน ID ในการเรียกใช้ฟังก์ชันของเรา เรียกใช้รหัสใหม่ของเรา:
โปรแกรมของเราประสบความสำเร็จในการเปลี่ยนแปลงเนื้อหาของชื่อของเราเพื่อรวมชื่อผู้ใช้ของเรา
บทสรุป
document.getElementById() วิธีการเลือกองค์ประกอบจากหน้าเว็บ วิธีนี้ช่วยให้คุณดูและเปลี่ยนเนื้อหาขององค์ประกอบได้
เมื่อคุณใช้วิธีนี้ คุณควรตรวจสอบให้แน่ใจว่าคุณใช้กรณีที่ถูกต้อง ID ไม่ใช่ตัวพิมพ์ใหญ่ทั้งหมด คุณต้องใช้ตัวพิมพ์ใหญ่ I และตัวพิมพ์เล็ก d สำหรับวิธีการทำงาน
