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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

Nes224
PHP Super Member
PHP Super Member
Posts: 234
Joined: 20/12/2021 11:36 am

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

Post by 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 23 times
ในที่นี้คือ code ที่เขียน Script ไว้มีดังนี้

Code: Select all

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 23 times
และเมื่อทำการกดแล้วจะปรากฏ Error ขึ้นที่ Console ของ firefox
help.jpg
help.jpg (13.86 KiB) Viewed 23 times
มาถึงตรงนี้แล้วเราต้องวิเคราะห์สาเหตุว่าเกิดจากอะไร ซึ่งในที่นี้คือ เราต้องกำหนด eventType ให้ตรงกับลักษณะ คือเราต้องกำหนด eventType จาก click เป็น change เพราะว่าเราต้องการที่จะเปลี่ยนข้อความที่ปรากฏบน display นั้นเอง ตรง code บรรทัดนี้

Code: Select all

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

Code: Select all

document.getElementsByName('Added_on')[0].addEventListener("change", function (el) {
จากนั้นจะไม่มี alert เกิดขึ้นมา
  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 1 guest