Onchange関数が機能しません

Question

オプション値に従って異なるタスクを実行するonchange関数でajax呼び出しを実行します。 Hovewerの何かが関数内で間違っているので、 "Hello"を覚えていません。何が間違っているのか見当たりますか？

マイ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> 

と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

私はイベントが'change'と呼ばれていると思う：

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