MDN describes the addEventListener() method as a function that will be called whenever the specified event is delivered to the target. In order for the code to work, you need to access the target.
Common targets are Element, Document, Window, and any object that supports events (such as XMLHttpRequest). In this article, we want to access an element so that we can assign it as a target for a specified event.
JavaScript will throw an error when you try to add an event listener to a node with a specific element ID, Class, or Name with a dash. JavaScript doesn’t like dashes ( – ), it will understand it as a minus. บทความนี้นำเสนอวิธีแก้ปัญหาสองวิธีในการแก้ไขข้อผิดพลาด JavaScript ที่เกิดจากเครื่องหมายขีดกลาง ( – ) ในชื่อขององค์ประกอบ
Solved:How to resolve a JavaScript error caused by a dash
To prevent JavaScript from understanding the dash as a minus use an alternative way of selecting that node that takes strings.
Use querySelector()
In JavaScript querySelector() takes a string that can include the dashes. การทำให้เป็นสตริงทำให้มั่นใจว่า JavaScript ไม่เข้าใจขีดกลางที่เป็นเครื่องหมายลบ ตาม MDN วิธีการเอกสาร querySelector() ส่งคืนองค์ประกอบแรกภายในเอกสารที่ตรงกับตัวเลือกที่ระบุหรือกลุ่มของตัวเลือก If no matches are found, null is returned.
It allows you to select an element with a specific ID using the ID selector e.g. แทนที่จะใช้ `e.target.new-task-description` ให้ใช้ `e.target.querySelector('#new-task-description')`
You can also select an element with a class using the class selector e.g. `e.target.querySelector(‘.new-task-description’)`.
เปลี่ยนชื่อโหนด
มีวิธีแฮ็กที่ไม่แนะนำแต่ใช้งานได้ เปลี่ยนชื่อโหนดโดยแทนที่เส้นประใน ID หรือชื่อคลาสด้วยเครื่องหมายขีดล่าง หรือเพียงแค่ลบเครื่องหมายขีดกลางในการอ้างอิงไปยังโหนดทั้งหมด เช่น `e.target.new_task_description.value` และ `e.target.newtaskdescription.value`
วิธีแก้ปัญหาอย่างใดอย่างหนึ่งใน 2 วิธีจะแก้ไขข้อผิดพลาด JavaScript อย่างไรก็ตาม การใช้ querySelector เป็นโซลูชันที่ต้องการเนื่องจากมีความสวยงามมากกว่า
Creating a variable
โซลูชันอื่นที่ฉันสำรวจคือการสร้างตัวแปรชื่อทาสก์อินพุท กำหนดโหนดให้กับตัวแปรนั้น จากนั้นเชื่อมโยงตัวแปรทาสก์อินพุทเข้ากับเป้าหมาย เช่น newTextInput =document.getElementById(“new-task-description”) แต่ JavaScript ไม่ทำงานอย่างที่ฉันคาดไว้เมื่อทดสอบใน DOM
Other methods to try
เมื่อฉันพยายามโยงเมธอด getElementByID() เช่น e.target.getElementByID('new-task-description'), JavaScript เกิดข้อผิดพลาด บางทีอาจมีข้อผิดพลาดทางไวยากรณ์ที่ฉันทำแต่ตรวจไม่พบ
หากฉันไม่ได้สร้างข้อผิดพลาดทางไวยากรณ์ ในทางทฤษฎีนั่นหมายความว่าการเชื่อมโยงเมธอด getElementByClassName() จะไม่ทำงานเช่นกัน
มีวิธีอื่นที่ฉันไม่ได้ลองซึ่งคุณอาจต้องการตรวจสอบ ทั้งนี้ขึ้นอยู่กับองค์ประกอบ
คุณสามารถใช้เมธอด document.getElementsByTagName() เพื่อเลือกองค์ประกอบทั้งหมดของแท็ก HTML เฉพาะได้ ดังนี้:
getElementsByTagName(‘li’)
และคุณสามารถใช้เมธอด document.getElementsByName() เพื่อเลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ชื่อเฉพาะได้ เช่นนี้:
getElementsByName(‘new-task’)
Testing and learning
ฉันลงทะเบียนในโปรแกรม Flex วิศวกรรมซอฟต์แวร์ของ Flatiron School และได้ทำงานในห้องปฏิบัติการหลายแห่ง ฉันได้รับแรงบันดาลใจในการเขียนสิ่งนี้เพราะฉันไม่พบบทความที่จะช่วยระบุสาเหตุที่ JavaScript ส่งข้อผิดพลาดให้ฉัน
โชคดีที่ Flatiron School มีโค้ชด้านเทคนิคที่ช่วยให้ฉันระบุได้ว่าข้อผิดพลาดนั้นเกิดจาก JavaScript ตีความเครื่องหมายขีดเป็นลบ ซึ่งฉันจะไม่มีวันเดาได้หากไม่ได้รับความช่วยเหลือจากพวกเขาเพราะไวยากรณ์ของฉันถูกต้อง หวังว่าคนอื่นๆ ที่เรียนรู้ JavaScript ที่ไม่สามารถเข้าถึงโค้ชด้านเทคนิคจะพบว่าบทความนี้มีประโยชน์ ขอให้สนุกกับการเขียนโค้ด!
