MDN อธิบายว่าเมธอด addEventListener() เป็นฟังก์ชันที่จะถูกเรียกทุกครั้งที่ event ที่ระบุถูกส่งมายัง target เพื่อให้โค้ดทำงาน คุณต้องเข้าถึง target ก่อน
Common targets ได้แก่ Element, Document, Window และ object ใดๆ ที่รองรับ events (เช่น XMLHttpRequest) ในบทความนี้เราต้องการเข้าถึง element เพื่อกำหนดเป็น target สำหรับ event ที่ระบุ
JavaScript จะโยน error เมื่อคุณพยายาม add event listener ให้ node ที่มี element ID, Class หรือ Name ที่มี dash (–) JavaScript ไม่ชอบ dashes จะเข้าใจว่าเป็น minus operator บทความนี้ให้สองวิธีแก้ error ของ JavaScript ที่เกิดจาก dash ในชื่อ element
แก้แล้ว: วิธีแก้ JavaScript error จาก dash
เพื่อป้องกันไม่ให้ JavaScript เข้าใจ dash ว่าเป็น minus ให้ใช้วิธีเลือก node แบบ alternative ที่รับ strings
ใช้ querySelector()
ใน JavaScript querySelector() รับ string ที่สามารถรวม dash ได้ การแปลงเป็น string ทำให้ JavaScript ไม่เข้าใจ dash ว่าเป็น minus ตาม MDN เมธอด querySelector() ของ Document คืนค่า Element แรกใน document ที่ตรงกับ selector ที่ระบุ หรือกลุ่ม selectors หากไม่เจอคืนค่า null
มันช่วยให้คุณเลือก element ด้วย ID selector ได้ เช่น แทน e.target.new-task-description ใช้ e.target.querySelector('#new-task-description')
คุณยังเลือก element ด้วย class selector ได้ เช่น e.target.querySelector('.new-task-description')
เปลี่ยนชื่อ Node
มี hack solution ที่ไม่แนะนำแตทำงานได้ คือ เปลี่ยนชื่อ node โดยแทนที่ dash ใน ID หรือ Class name ด้วย underscore หรือลบ dash ออกในทุก reference ของ node เช่น e.target.new_task_description.value และ e.target.newtaskdescription.value
ทั้งสองวิธีแก้ JavaScript error ได้ แต่วิธี querySelector เป็นที่แนะนำเพราะขлеганต์กว่า
การสร้างตัวแปร
อีกวิธีที่สำรวจเกี่ยวข้องกับการสร้างตัวแปรชื่อ taskInput กำหนด node ให้ตัวแปรนั้น แล้ว chain ตัวแปร taskInput ไปที่ target เช่น newTextInput = document.getElementById("new-task-description") แต่ JavaScript ไม่ทำงานเป็นที่คาดหวังเมื่อทดสอบใน DOM
เมธอดอื่นๆ ที่ลองได้
เมื่อลอง chain getElementByID() method เช่น e.target.getElementByID('new-task-description') JavaScript โยน error อาจมี syntax error ที่ทำและไม่รู้
ถ้าไม่ได้ทำ syntax error ทฤษฎีแล้วหมายความว่า chain getElementByClassName() ก็ไม่ได้ทำงานเช่นกัน
มีเมธอดอื่นๆ ที่ไม่ได้ลอง ซึ่งคุณอาจอยากเช็คขึ้นอยู่กับ element
คุณสามารถใช้ document.getElementsByTagName() เพื่อเลือก elements ทั้งหมดของ HTML tag เฉพาะ เช่น:
getElementsByTagName('li')
และใช้ document.getElementsByName() เพื่อเลือก elements ทั้งหมดที่มี name attribute เฉพาะ เช่น:
getElementsByName('new-task')
การทดสอบและการเรียนรู้
ผมลงทะเบียนใน Flatiron School Software Engineering flex program และกำลังทำ labs หลายอัน ผมได้แรงบันดาลใจเขียนบทความนี้เพราะหา article ช่วยระบุว่าทำไม JavaScript ถึงโยน error ไม่เจอ
ขอขอบคุณ Flatiron School ที่มี technical coaches ช่วยระบุว่า error เกิดจาก JavaScript ตีความ dash ว่า minus ซึ่งผมไม่เคยเดาได้เพราะ syntax ถูกต้อง หวังว่าอื่นๆ ที่เรียน JavaScript ไม่มี technical coaches จะหาบทความนี้มีประโยชน์ Happy coding!
