Onchange function does´t work

Question

I want to perform an ajax call on an onchange function executing different tasks according the option value. Hovewer something is wrong in the function as it never consols "Hello". Can you spot what´s wrong?

My 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>

And 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

I think the event is called 'change' :

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