การแก้ปัญหา Uncaught TypeError: el.target.selectedIndex is undifined

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

Nes224
PHP Super Member
PHP Super Member
โพสต์: 441
ลงทะเบียนเมื่อ: 20/12/2021 11:36 am

การแก้ปัญหา Uncaught TypeError: el.target.selectedIndex is undifined

โพสต์ที่ยังไม่ได้อ่าน โดย Nes224 »

จากหัวข้อของบทความนี้ เกิดจากการกำหนด addEventListener ไว้ผิด ซึ่งอาจ browser ที่ใช้งานอาจจะไม่มี alert แจ้งเตือนที่ console อย่างเช่น google chrome, หรือ microsoft Edge แต่ถ้าหากใช้งานกับ firefox แล้วที่ console จะมีการแจ้งเตือน ซึ่งอย่างผลที่ตามเมื่อเราทำการคลิกที่ action ใดๆก็ตามบน หน้า UI แล้ว อาจจะไม่มี Event นั้นๆเกิดขึ้น วิธีการแก้ไขก็คือให้เรามาสังเกตุที่ Script ของเราว่าได้กำหนด Event ไว้ถูกลักษณะกับการใช้งานหรือไม่ โดยในที่นี้ Error ได้บอกว่า
Uncaught TypeError: el.target.selectedIndex is undifined ซึ่ง TypeError เป็นการบอกว่าผิดลักษณะ ดังนัันเราจึงจำเป็นที่จะต้องมาตรวจสอบที่ code ของเราว่าได้กำหนดไว้อย่างไรบ้าง
Error
Error
_Con.jpg (40.84 KiB) Viewed 1033 times
ในที่นี้คือ code ที่เขียน Script ไว้มีดังนี้

โค้ด: เลือกทั้งหมด

window.addEventListener('load', (event) => {
  category.onselect();
});

category = {
  onselect: () => {
    document.getElementsByName('Added_on')[0].addEventListener("click", function (el) {
      // console.log(el.target.value);
      let rows = document.getElementsByClassName('Added_on');
      for (var i = 0; i < rows.length; i++) {
        rows[i].classList.remove("hidden");
      }
      for (var i = 0; i < rows.length; i++) {
        if(rows[i].getAttribute("data-category") != el.target.value && rows[i].getAttribute("data-category") != ""){
          rows[i].classList.add("hidden");
        }
      }

      // cat-title
      let cat_titles = document.getElementsByClassName('Added_on');
      for (var i = 0; i < cat_titles.length; i++) {
        cat_titles[i].innerHTML = el.target.options[el.target.selectedIndex].text + " Access";
      }

    })
  }
}
(Added_on คือตัวแปรบ้างอย่างในการทำงานของ code เราในที่นี้คือปกผิดไว้) จะสังเกตุเห็นว่า .addEventListener("click", function(el) { นั้นซึ่งตรงคำว่าเป็นการกำหนด eventType (สามารถอ่านเพิ่มเติมได้จาก บทความนี้ >> viewtopic.php?f=78&t=80846&p=236893#p236893 )
ขอยกตัวอย่างให้เห็นภาพมากกว่านี้ดังภาพที่ปรากฏ คือ ที่ dropdown เราสามารถที่จะกด เพื่อทำการเลือกรายการอื่นๆ
Event2.jpg
Event2.jpg (4.25 KiB) Viewed 1033 times
และเมื่อทำการกดแล้วจะปรากฏ Error ขึ้นที่ Console ของ firefox
help.jpg
help.jpg (13.86 KiB) Viewed 1033 times
มาถึงตรงนี้แล้วเราต้องวิเคราะห์สาเหตุว่าเกิดจากอะไร ซึ่งในที่นี้คือ เราต้องกำหนด eventType ให้ตรงกับลักษณะ คือเราต้องกำหนด eventType จาก click เป็น change เพราะว่าเราต้องการที่จะเปลี่ยนข้อความที่ปรากฏบน display นั้นเอง ตรง code บรรทัดนี้

โค้ด: เลือกทั้งหมด

document.getElementsByName('Added_on')[0].addEventListener("click", function (el) {
เปลี่ยนเป็น

โค้ด: เลือกทั้งหมด

document.getElementsByName('Added_on')[0].addEventListener("change", function (el) {
จากนั้นจะไม่มี alert เกิดขึ้นมา
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 67