Lỗi document.getElementByID is not a function trong JavaScript – Giải pháp

Phương thức getElementById trong JavaScript chọn một element từ HTML Document Object Model (DOM). Nếu bạn viết sai chính tả phương thức này, bạn sẽ gặp lỗi document.getElementByID is not a function trong chương trình.

Hướng dẫn này thảo luận lỗi này có nghĩa là gì và tại sao nó được ném ra. Chúng ta sẽ đi qua một ví dụ để bạn học những gì cần để sửa nó.

document.getElementByID is not a function

Phương thức document.getElementById() là một trong các phương thức selector (bộ chọn) của JavaScript. Phương thức này truy xuất đối tượng dựa trên ID của nó từ HTML DOM.

Phương thức này dùng để thao tác nội dung của element hoặc truy xuất thông tin về element cụ thể, như nội dung hoặc thuộc tính của nó.

ID được định nghĩa trong HTML. Một ID phải duy nhất cho một element cụ thể:

<header id="top_header"></header>

Thẻ <header> có ID top_header. ID này duy nhất cho thẻ <header>. ID thường dùng để áp dụng style cho element cụ thể bằng CSS.

document.getElementById() phân biệt chữ hoa chữ thường (case-sensitive). Phương thức này không phải là:

• document.getelementbyid()
• document.getElementByID()
• document.GetElementById()

Mọi biến thể khác trên tên phương thức sẽ không được JavaScript chấp nhận.

Mặc dù rất cám dỗ viết ID bằng chữ in hoa vì nó là viết tắt của từ khác, phương thức yêu cầu bạn dùng chữ I in hoa và chữ d thường.

Để tìm hiểu thêm về phương thức getElementById, đọc hướng dẫn của chúng ta về JavaScript getElementById.

Ví dụ minh họa

Chúng ta sẽ xây dựng đoạn code chào mừng người dùng đến ứng dụng. Thông báo chào mừng sẽ ở tiêu đề xuất hiện ở đầu trang.

Với mục đích ví dụ, chúng ta dùng tên demo.

Để bắt đầu, định nghĩa mã HTML body cho phần chào mừng:

<html> 
<body> 
  <header> 
    <h1 id="welcome_title">Welcome</h1> 
  </header> 
</body> 
</html>

Mặc định, thẻ <h1> sẽ chứa nội dung Welcome. Thẻ <header> là thẻ cha chứa tiêu đề. Tiếp theo, thêm thẻ <script> dưới thẻ header. Thẻ script chứa tất cả mã JavaScript cho thông báo chào mừng:

... 
</header> 
<script> 
</script> 
</body> 
...

Bên trong script, chọn tiêu đề và thay đổi nội dung:

var title = document.getElementByID("welcome_title"); 
title.textContent = "Welcome, Luke!";

Phương thức getElementById() chọn tiêu đề. Chúng ta gán element HTML này cho biến JavaScript tên title. Nội dung tiêu đề sẽ thay đổi để hiển thị "Welcome, Luke!". Chúng ta dùng phương thức textContent để thay đổi tiêu đề.

Hãy chạy mã và xem điều gì xảy ra. Nếu mở JavaScript console, ta thấy lỗi:

Mã không hoạt động đúng. Tiêu đề không bị thay đổi:

Giải pháp

Chúng ta đã dùng case sai cho selector document.getElementByID. Thay vì dùng chữ I in hoa và chữ d thường, chúng ta dùng chữ I và D in hoa.

JavaScript không đăng ký chương trình của chúng ta như đang gọi hàm getElementById vì tên hàm phân biệt chữ hoa chữ thường.

Chúng ta cần sửa mã để dùng case đúng cho hàm:

var title = document.getElementById("welcome_title"); 
title.textContent = "Welcome, Luke!";

Chúng ta giờ dùng Id thay vì ID trong lời gọi hàm. Hãy chạy mã mới:

Chương trình thành công thay đổi nội dung tiêu đề để bao gồm tên người dùng.

Kết luận

Phương thức document.getElementById() chọn element từ trang web. Phương thức này cho phép bạn xem và thay đổi nội dung element. Khi dùng phương thức này, bạn nên chắc chắn dùng case đúng. ID không phải toàn bộ chữ in hoa. Bạn cần dùng chữ I in hoa và chữ d thường để phương thức hoạt động.