Uncaught TypeError: el.target.selectedIndex is undifined ซึ่ง TypeError เป็นการบอกว่าผิดลักษณะ ดังนัันเราจึงจำเป็นที่จะต้องมาตรวจสอบที่ code ของเราว่าได้กำหนดไว้อย่างไรบ้าง
ในที่นี้คือ 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";
}
})
}
}
ขอยกตัวอย่างให้เห็นภาพมากกว่านี้ดังภาพที่ปรากฏ คือ ที่ dropdown เราสามารถที่จะกด เพื่อทำการเลือกรายการอื่นๆ
และเมื่อทำการกดแล้วจะปรากฏ Error ขึ้นที่ Console ของ firefox
มาถึงตรงนี้แล้วเราต้องวิเคราะห์สาเหตุว่าเกิดจากอะไร ซึ่งในที่นี้คือ เราต้องกำหนด eventType ให้ตรงกับลักษณะ คือเราต้องกำหนด eventType จาก click เป็น change เพราะว่าเราต้องการที่จะเปลี่ยนข้อความที่ปรากฏบน display นั้นเอง ตรง code บรรทัดนี้
โค้ด: เลือกทั้งหมด
document.getElementsByName('Added_on')[0].addEventListener("click", function (el) {
โค้ด: เลือกทั้งหมด
document.getElementsByName('Added_on')[0].addEventListener("change", function (el) {