Event object is undefined on JavaScript addEventListener function

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

thats not the issue but - You are not meant to have two values in one option. or is that a typo ? — Always Helping
– Always Helping, Commented Sep 5, 2020 at 2:22
Add target between evt and options like this evt.target.options. — Dominique Fortin
– Dominique Fortin, Commented Sep 5, 2020 at 2:23
The two values are a mistake. Thanks @AlwaysHelping, you solved my question! — Lorena
– Lorena, Commented Sep 5, 2020 at 17:03

Always Helping · Accepted Answer · 2020-09-05 02:25:55Z

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>

Collectives™ on Stack Overflow

Event object is undefined on JavaScript addEventListener function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related