MDN mô tả phương thức addEventListener() là một hàm sẽ được gọi bất cứ khi nào sự kiện được chỉ định được gửi tới mục tiêu. Để mã hoạt động, bạn cần truy cập vào mục tiêu.
Các mục tiêu chung là Phần tử, Tài liệu, Cửa sổ và bất kỳ đối tượng nào hỗ trợ các sự kiện (chẳng hạn như XMLHttpRequest). Trong bài viết này, chúng tôi muốn truy cập một phần tử để có thể chỉ định nó làm mục tiêu cho một sự kiện được chỉ định.
JavaScript sẽ báo lỗi khi bạn cố gắng thêm trình xử lý sự kiện vào một nút có ID, Lớp hoặc Tên phần tử cụ thể bằng dấu gạch ngang. JavaScript không thích dấu gạch ngang ( – ), nó sẽ hiểu đó là dấu trừ. Bài viết này cung cấp hai giải pháp để giải quyết lỗi JavaScript do dấu gạch ngang ( – ) trong tên của một phần tử gây ra.
Đã giải quyết:Cách khắc phục lỗi JavaScript do dấu gạch ngang gây ra
Để ngăn JavaScript hiểu dấu gạch ngang là dấu trừ, hãy sử dụng cách khác để chọn nút chứa chuỗi đó.
Sử dụng querySelector()
Trong JavaScript querySelector() lấy một chuỗi có thể bao gồm dấu gạch ngang. Việc xâu chuỗi đảm bảo rằng JavaScript không hiểu dấu gạch ngang là dấu trừ. Theo MDN, phương thức Tài liệu querySelector() trả về Phần tử đầu tiên trong tài liệu khớp với bộ chọn hoặc nhóm bộ chọn đã chỉ định. Nếu không tìm thấy kết quả phù hợp, null sẽ được trả về.
Nó cho phép bạn chọn một thành phần có ID cụ thể bằng cách sử dụng bộ chọn ID, ví dụ:thay vì `e.target.new-task-description` hãy sử dụng `e.target.querySelector('#new-task-description')`.
Bạn cũng có thể chọn một phần tử có lớp bằng cách sử dụng bộ chọn lớp, ví dụ:`e.target.querySelector('.new-task-description')`.
Đổi tên nút
Có một giải pháp hack không được khuyến khích nhưng vẫn hoạt động. Đổi tên nút bằng cách thay thế dấu gạch ngang trong tên ID hoặc Lớp bằng dấu gạch dưới hoặc chỉ cần xóa dấu gạch ngang trong tất cả các tham chiếu đến nút, ví dụ:`e.target.new_task_description.value` và `e.target.newtaskdescription.value`.
Bất kỳ một trong 2 giải pháp sẽ khắc phục được lỗi JavaScript; tuy nhiên, sử dụng querySelector là giải pháp được ưu tiên hơn vì nó thanh lịch hơn.
Tạo biến
Một giải pháp khác mà tôi đã khám phá liên quan đến việc tạo một biến có tên taskInput, gán nút cho biến đó và sau đó nối biến taskInput với mục tiêu, ví dụ:newTextInput =document.getElementById(“new-task-description”) nhưng JavaScript không hoạt động như tôi mong đợi khi tôi thử nghiệm nó trong DOM.
Các phương pháp khác nên thử
Khi tôi cố gắng xâu chuỗi phương thức getElementByID(), vd e.target.getElementByID('new-task-description'), JavaScript đã báo lỗi. Có lẽ mình mắc lỗi cú pháp mà không nắm bắt được.
Nếu tôi không mắc lỗi cú pháp thì về lý thuyết điều đó có nghĩa là việc kết nối phương thức getElementByClassName() cũng sẽ không hoạt động.
Có những phương pháp khác mà tôi chưa thử và bạn có thể muốn thử tùy thuộc vào thành phần.
Bạn có thể sử dụng phương thức document.getElementsByTagName() để chọn tất cả các thành phần của một thẻ HTML cụ thể, như sau:
getElementsByTagName('li')
Và bạn có thể sử dụng phương thức document.getElementsByName() để chọn tất cả các thành phần có thuộc tính tên cụ thể, như sau:
getElementsByName('new-task')
Kiểm tra và học hỏi
Tôi đã đăng ký tham gia chương trình linh hoạt Kỹ thuật phần mềm của Trường Flatiron và tôi đã làm việc tại một số phòng thí nghiệm. Tôi được truyền cảm hứng để viết bài này vì tôi không thể tìm thấy một bài viết nào giúp tôi xác định lý do tại sao JavaScript lại gây ra lỗi cho tôi.
Rất may, Trường Flatiron có các huấn luyện viên kỹ thuật đã giúp tôi xác định rằng lỗi xảy ra do JavaScript hiểu dấu gạch ngang là dấu trừ, điều mà tôi sẽ không bao giờ đoán được nếu không có sự trợ giúp của họ vì cú pháp của tôi đúng. Hy vọng rằng những người đang học JavaScript không có cơ hội tiếp cận với huấn luyện viên kỹ thuật sẽ thấy bài viết này hữu ích. Chúc bạn viết mã vui vẻ!