title: get value of datalist in javascript after user changes value
body: <p>I have a datalist on an order form and the user selects or enters in the value they want. Everything works fine <strong>IF</strong> the user does not go back and change the value originally selected or entered in the datalist input. </p>
  
  <p>If the user changes the value by typing in a new value I can get the correct value <strong>but</strong> if they double click and clear the field so that they can reactivate the datalist selector and pick from the datalist selector then I cannot seem to get the new value.</p>
  
  <p>I have tried to add an EventListener to no avail</p>
  
  <pre><code>document.getElementById(height).addEventListener("click", function(){ document.getElementById(height).value; });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;input style="width:100%" list="height" id="height_0" onChange="updatePrice(this.id);"&gt;
  &lt;datalist id="height"&gt;
  &lt;option value="2.00"&gt;
  &lt;option value="4.00"&gt;
  &lt;option value="6.00"&gt;
  &lt;option value="8.00"&gt;
  &lt;option value="10.00"&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>function updatePrice(entityLine){
  var targetCell = entityLine.split("_");
  var theRow = targetCell[1];
  
  var height = "height_" + theRow;
  var height = document.getElementById(height).value;
  console.log(height);
  }
  </code></pre>