CODEWITHSUNDEEP
javascripthtml
Lorena
Lorena

Reputation: 21

Event object is undefined on JavaScript addEventListener function

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

Upvotes: 0

Views: 667

Answers (1)

Always Helping
Always Helping

Reputation: 14570

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(A-Z)</option>
  <option value="priceAsc">Nombre(Z-A)</option>
</select>

Upvotes: 1

Related Questions