Onchange-Funktion funktioniert nicht

Question

Ich möchte einen Ajax-Aufruf auf eine Onchange-Funktion ausführen verschiedene Aufgaben entsprechend der Option Wert ausführen. In der Funktion stimmt etwas nicht, da es nie "Hallo" tröstet. Kannst du sehen, was los ist?

Mein HTML

<!-- PRODUCTS display and editing is handled here according USER or ADMIN--> 

<div id="pageViewProducts" class="page"> 
     <div class="lblWrapper"> 
       <button type="button" class="btnShowPage" id="btnCreateProduct" data-showThisPage="pageCreateProduct"><i class="fa fa-plus"></i>&nbsp;Add Product</button> 
       <form id="frmSortBy"> 
       <p>Sort by:</p> 
       <select id="sortProductsSelector"> 
        <option value="oPriceLowToHigh">PRICE (LOW TO HIGH)</option> 
        <option value="oPriceHighToLow" >PRICE (HIGH TO LOW</option> 
        <option value="oOnSale" id="oOnSale" selected>ON SALE</option> 
       </select> 
       </form> 
       <div id="lblProductList"> 
       <!-- Generated dynamically --> 
       </div> 
     </div> 
</div> 

Und javascript:

var optionSelector = document.getElementById("sortProductsSelector"); 
    optionSelector.addEventListener("onchange", function() { 
     var request = new XMLHttpRequest(); 
     request.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 

      ajProductDataFromServer = JSON.parse(this.responseText); 
      console.log("Response:" + ajProductDataFromServer); 


      if(optionSelector.value == "oPriceLowToHigh") { 
       console.log ("Hello") 
     } 
     } 
     } 

     request.open("GET", "api_sort_products.php", true); 
     request.send(); 
    }); 

Answer 1

denke ich, das Ereignis 'change' genannt wird:

optionSelector.addEventListener("change", function() { 
    // ... 
});