How to get value on change if using materialize css?

Question

How to get the value from on change if I'm using Materialize CSS? Without Materialize CSS, I'm using dropdown attribute, and everytime dropdown change it will get the value.

<div class="input-field col s6">
          <select id="name">
            <option value="" disabled selected>Choose Name</option>
            <option value="1">John</option>
            <option value="2">Doe</option>
            <option value="3">Kim</option>
          </select>
          <label>Name Selection</label>
</div>

Now in Javascript:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
});

 document.addEventListener("DOMContentLoaded",function(){

    google.script.run.withSuccessHandler(generateTable).getTableData();

  });


function generateTable(dataArray){
var name = document.getElementById("name");

     name.onchange = function(){
        
        console.log(this.value);
      }
}

Seem like this.value didn't return any value from dropdown. Any suggestion?

Answer 1

As for me it works, I think you need to call generateTable().