addEventListener change not triggered the event

I am having a problem, the code is working fine is JSfiddle but when relocating to actual workspace it is not working. Already put the JS library

The problem is, the listener is not triggered by the jQuery event. Here is some simple code to illustrate the issue. Notice that the problem is from addEventListener or code syntax. Any changes that I need to make from current code?

Any help is massively appreciated!.

const length_field = document.querySelector('#unitlength');

const width_field = document.querySelector('#unitwidth');

const area_field = document.querySelector('#unitarea');

const unit_field = document.querySelector('#unitmeasure');

length_field.addEventListener('change', function(e) {
  // using condition 
  if (this.value === "feet") {
    area_field.value = "feet";
    width_field.value = "feet";
    unit_field.value = "imperial";
  } else if (this.value === "meter") {
    area_field.value = "meter";
    width_field.value = "meter";
    unit_field.value = "metric";
  } else {
    // do nothing by default 
  }
});

width_field.addEventListener('change', function(e) {
  // using condition 
  if (this.value === "feet") {
    area_field.value = "feet";
    length_field.value = "feet";
    unit_field.value = "imperial";
  } else if (this.value === "meter") {
    area_field.value = "meter";
    length_field.value = "meter";
    unit_field.value = "metric";
  } else {
    // do nothing by default 
  }
});

area_field.addEventListener('change', function(e) {
  // using condition 
  if (this.value === "feet") {
    length_field.value = "feet";
    width_field.value = "feet";
    unit_field.value = "imperial";
  } else if (this.value === "meter") {
    length_field.value = "meter";
    width_field.value = "meter";
    unit_field.value = "metric";
  } else {
    // do nothing by default 
  }
});

unit_field.addEventListener('change', function(e) {
  // using condition 
  if (this.value === "feet") {
    length_field.value = "feet";
    width_field.value = "feet";
    unit_field.value = "imperial";
  } else if (this.value === "meter") {
    length_field.value = "meter";
    width_field.value = "meter";
    unit_field.value = "metric";
  } else {
    // do nothing by default 
  }
});

<head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

</head>

<label for="unitlength">Length </label>
   <select id="unitlength" name="unitlength">
     <option value="" selected="selected">--Unit--</option>
     <option value="feet">feet</option>
     <option value="meter">meter</option>
   </select>


   <label for="unitwidth">Width </label>
   <select id="unitwidth" name="unitwidth">
     <option value="" selected="selected">--Unit--</option>
     <option value="feet">feet</option>
     <option value="meter">meter</option>
   </select>


   <label for="unitarea">Area </label>
   <select id="unitarea" name="unitarea">
     <option value="" selected="selected">--Unit--</option>
     <option value="feet">sqft.</option>
     <option value="meter">m2</option>
   </select>

  
     <label for="unitmeasure"> Unit</label>
     <select class="list-dt" id="unitmeasure" name="unitmeasure">
       <option value="" selected="selected" disabled> -Unit-</option>
       <option value="imperial" disabled>imperial</option>
       <option value="metric" disabled>metric</option>
     </select>

Solution

I have updated the code as follows:

Note: Check the place of the javascript code.

<html>

<style>

</style>

<body>
 <head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

</head>

<label for="unitlength">Length </label>
   <select id="unitlength" name="unitlength">
     <option value="" selected="selected">--Unit--</option>
     <option value="feet">feet</option>
     <option value="meter">meter</option>
   </select>


   <label for="unitwidth">Width </label>
   <select id="unitwidth" name="unitwidth">
     <option value="" selected="selected">--Unit--</option>
     <option value="feet">feet</option>
     <option value="meter">meter</option>
   </select>


   <label for="unitarea">Area </label>
   <select id="unitarea" name="unitarea">
     <option value="" selected="selected">--Unit--</option>
     <option value="feet">sqft.</option>
     <option value="meter">m2</option>
   </select>

  
     <label for="unitmeasure"> Unit</label>
     <select class="list-dt" id="unitmeasure" name="unitmeasure">
       <option value="" selected="selected" disabled> -Unit-</option>
       <option value="imperial" disabled>imperial</option>
       <option value="metric" disabled>metric</option>
     </select>

  <script>
  
  const length_field = document.querySelector('#unitlength');

const width_field = document.querySelector('#unitwidth');

const area_field = document.querySelector('#unitarea');

const unit_field = document.querySelector('#unitmeasure');

length_field.addEventListener('change', function(e) {
  // using condition 
  if (this.value === "feet") {
    area_field.value = "feet";
    width_field.value = "feet";
    unit_field.value = "imperial";
  } else if (this.value === "meter") {
    area_field.value = "meter";
    width_field.value = "meter";
    unit_field.value = "metric";
  } else {
    // do nothing by default 
  }
});

width_field.addEventListener('change', function(e) {
  // using condition 
  if (this.value === "feet") {
    area_field.value = "feet";
    length_field.value = "feet";
    unit_field.value = "imperial";
  } else if (this.value === "meter") {
    area_field.value = "meter";
    length_field.value = "meter";
    unit_field.value = "metric";
  } else {
    // do nothing by default 
  }
});

area_field.addEventListener('change', function(e) {
  // using condition 
  if (this.value === "feet") {
    length_field.value = "feet";
    width_field.value = "feet";
    unit_field.value = "imperial";
  } else if (this.value === "meter") {
    length_field.value = "meter";
    width_field.value = "meter";
    unit_field.value = "metric";
  } else {
    // do nothing by default 
  }
});

unit_field.addEventListener('change', function(e) {
  // using condition 
  if (this.value === "feet") {
    length_field.value = "feet";
    width_field.value = "feet";
    unit_field.value = "imperial";
  } else if (this.value === "meter") {
    length_field.value = "meter";
    width_field.value = "meter";
    unit_field.value = "metric";
  } else {
    // do nothing by default 
  }
});
    </script>
</body>