事件对象在 JavaScript addEventListener 函数上未定义

Question

I'm trying to make a switch selection based on an HTML select with the following code:

document.getElementById("filterList").addEventListener("change", function(evt) {
        switch(evt.options[evt.selectedIndex].value) {
            case "priceAsc":
                sortAndShowProducts(ORDER_ASC_BY_PRICE, currentProductsArray);
                break;
            case "priceDesc":
                sortAndShowProducts(ORDER_DESC_BY_PRICE, currentProductsArray);
                break;
            case "nameAsc":
                sortAndShowProducts(ORDER_ASC_BY_NAME, currentProductsArray);
                break;
            case "priceAsc":
                sortAndShowProducts(ORDER_DESC_BY_NAME, currentProductsArray);
                break;
            default:
                console.log("Selección inválida: " + evt.options[evt.selectedIndex].value);
                break;
        }
    });

And the HTML tag:

<select name="selectFilter" id="filterList" class="browser-default custom-select">
    <option value="" disabled selected>Seleccione el filtro...</option>
    <option value="priceAsc">Precio ascendente</option>
    <option value="priceDesc">Precio descendente</option>
    <option value="nameAsc">Nombre(A-Z)</option>
    <option value="priceAsc" value="nameDesc">Nombre(Z-A)</option>
</select>

But when I select and option, I get the following message in console:

Uncaught TypeError: can't access property "undefined", evt.options is undefined
    <anonymous> http://192.168.1.115/proyectojap/js/products.js:95

Answer 1

You need to use Event.target on both evt.target.options and evt.target.selectedIndex to get the selected option value. In addition, you can also use currentTarget as well to have the same results

Also, you can not have two value attributes in one option. You had two values in your last option .

Live Demo:

 document.getElementById("filterList").addEventListener("change", function(evt) { console.log(evt.target.options[evt.target.selectedIndex].value) /* switch (evt.target.options[evt.target.selectedIndex].value) { case "priceAsc": sortAndShowProducts(ORDER_ASC_BY_PRICE, currentProductsArray); break; case "priceDesc": sortAndShowProducts(ORDER_DESC_BY_PRICE, currentProductsArray); break; case "nameAsc": sortAndShowProducts(ORDER_ASC_BY_NAME, currentProductsArray); break; case "priceAsc": sortAndShowProducts(ORDER_DESC_BY_NAME, currentProductsArray); break; default: console.log("Selección inválida: " + evt.options[evt.selectedIndex].value); break; } */ });

 <select name="selectFilter" id="filterList" class="browser-default custom-select"> <option value="" disabled selected>Seleccione el filtro...</option> <option value="priceAsc">Precio ascendente</option> <option value="priceDesc">Precio descendente</option> <option value="nameAsc">Nombre(AZ)</option> <option value="priceAsc">Nombre(ZA)</option> </select>