Get Option value by id works in chrome and not mozilla

Question

I want to insert the value of an option selected from max size field in price field. This works in chrome but not in Mozilla. I've been trying to figure out why but no success.

<div class="form-group"><label class="sr-only" for="id_max_size">Max 
   Size</label><select name="max_size" title="" required class="form-control" id="id_max_size">
   <option value="" disabled selected>Size ↓</option>
   <option value="10">AAA</option>
   <option value="20">BBB</option>
   <option value="30">CCC</option>
   <option value="40">DDD</option>
</select>

document.getElementById('id_max_size').onchange = function () {
    document.getElementById('id_price').value = event.target.value  
};;

How do I make it work with Mozila? what am I missing?

Answer 1

You can change your code to the following and it will work. You can add change EventListener and passin the event as parameter.

document.getElementById('id_max_size').addEventListener("change", function (event) {
    document.getElementById('id_price').value = event.target.value;
});

<div class="form-group">
  <label class="sr-only" for="id_max_size">Max 
  Size</label>

  <select name="max_size" title="" required class="form-control" id="id_max_size">
    <option value="" disabled selected>Size ↓</option>
    <option value="10">AAA</option>
    <option value="20">BBB</option>
    <option value="30">CCC</option>
    <option value="40">DDD</option>
  </select>

  <input id="id_price" value="" />
</div>