Phương thức getElementById trong JavaScript chọn một phần tử từ Mô hình đối tượng tài liệu HTML (DOM). Nếu bạn viết sai chính tả phương pháp này, bạn sẽ gặp phải document.getElementByID is not a function lỗi trong chương trình của bạn.
Hướng dẫn này thảo luận về lỗi này có nghĩa là gì và tại sao nó lại xuất hiện. Chúng tôi sẽ giới thiệu cho các bạn một ví dụ về lỗi này để bạn có thể tìm hiểu những điều cần biết để khắc phục.
document.getElementByID không phải là một hàm
document.getElementById() phương thức là một trong những phương thức của bộ chọn JavaScript. Phương thức này truy xuất một đối tượng dựa trên ID của nó từ HTML DOM.
Phương thức này được sử dụng để thao tác nội dung của một phần tử hoặc truy xuất thông tin về một phần tử cụ thể, chẳng hạn như nội dung hoặc các thuộc tính của nó.
ID được định nghĩa trong HTML. ID phải là duy nhất cho một phần tử cụ thể:
<header id=“top_header”></header>
<header> thẻ có ID top_header . ID này là duy nhất cho <header> nhãn. ID thường được sử dụng để áp dụng kiểu cho các phần tử cụ thể bằng cách sử dụng CSS.
document.getElementById() có phân biệt chữ hoa chữ thường. Phương pháp này không phải là:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
- document.getelementbyid ()
- document.getElementByID ()
- document.GetElementById ()
Bất kỳ biến thể nào khác về tên phương thức sẽ không được JavaScript chấp nhận.
Mặc dù rất hấp dẫn khi viết ID bằng chữ in hoa vì nó là viết tắt của một từ khác, nhưng phương pháp này yêu cầu bạn sử dụng chữ hoa I và chữ thường d .
Để tìm hiểu thêm về phương thức getElementById, hãy đọc hướng dẫn của chúng tôi về JavaScript getElementById.
Một tình huống mẫu
Chúng tôi sẽ tạo một đoạn mã chào đón người dùng đến với ứng dụng của chúng tôi. Thông báo chào mừng sẽ có trong tiêu đề xuất hiện ở đầu trang của chúng tôi.
Đối với mục đích của ví dụ này, chúng tôi sẽ sử dụng tên demo.
Để bắt đầu, hãy xác định mã HTML nội dung của chúng tôi cho phần chào mừng của trang web:
<html> <body> <header> <h1 id="welcome_title">Welcome</h1> </header> </body> </html>
Theo mặc định, <h1> của chúng tôi thẻ sẽ chứa nội dung Welcome . <header> là thẻ mẹ chứa tiêu đề của chúng tôi. Tiếp theo, chúng ta sẽ thêm một <script> bên dưới thẻ
… </header> <script> </script> </body> ...
Trong tập lệnh của chúng tôi, chúng tôi sẽ chọn tiêu đề của mình và thay đổi nội dung của nó:
var title = document.getElementByID("welcome_title");
title.textContent = "Welcome, Luke!";
getElementById() phương pháp chọn tiêu đề của chúng tôi. Chúng tôi chỉ định phần tử HTML này cho biến JavaScript có tên là title . Nội dung tiêu đề của chúng tôi sẽ được thay đổi để hiển thị "Chào mừng, Luke!" Chúng tôi sử dụng textContent phương pháp thay đổi tiêu đề.
Hãy chạy mã của chúng tôi và xem điều gì sẽ xảy ra. Nếu chúng tôi mở bảng điều khiển JavaScript của mình, chúng tôi có thể thấy lỗi:
Mã của chúng tôi không hoạt động chính xác. Tiêu đề của chúng tôi không được thay đổi:
Giải pháp
Chúng tôi đã sử dụng trường hợp không chính xác cho document.getElementByID bộ chọn. Thay vì sử dụng chữ hoa I và chữ thường d , chúng tôi đã sử dụng chữ hoa I và D .
JavaScript không đăng ký chương trình của chúng tôi dưới dạng gọi getElementById hàm vì tên hàm có phân biệt chữ hoa chữ thường.
Chúng tôi cần thay đổi mã của mình để chúng tôi sử dụng các trường hợp chính xác cho chức năng của mình:
var title = document.getElementById("welcome_title");
title.textContent = "Welcome, Luke!";
Chúng tôi hiện đang sử dụng Id thay vì ID trong lệnh gọi hàm của chúng tôi. Hãy chạy mã mới của chúng tôi:
Chương trình của chúng tôi đã thay đổi thành công nội dung của tiêu đề của chúng tôi để bao gồm tên của người dùng của chúng tôi.
Kết luận
document.getElementById() phương pháp chọn một phần tử từ trang web. Phương pháp này cho phép bạn xem và thay đổi nội dung của một phần tử.
Khi bạn sử dụng phương pháp này, bạn nên đảm bảo rằng bạn sử dụng đúng trường hợp. ID không phải là tất cả các chữ cái viết hoa. Bạn cần sử dụng chữ hoa I và chữ thường d để phương pháp hoạt động.