addEventListener 变化没有触发事件

Question

我有一个问题，代码在 JSfiddle 中运行良好，但是当重新定位到实际工作区时它不工作。已经放JS库

问题是，侦听器不是由 jQuery 事件触发的。下面是一些简单的代码来说明这个问题。请注意，问题来自 addEventListener 或代码语法。我需要对当前代码进行任何更改吗？

非常感谢任何帮助！

JS

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>

Answer 1

我已经更新代码如下：

注意：检查javascript代码的位置。

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

Answer 2

如果您正在使用 jQuery 为什么不使用其 API 进行事件处理？

$(document).ready(function () {
  const length_field = $("#unitlength");
  // other variables here

  length_field.on('change', function () {});
  // other jQuery code here
});

您可以对所有元素和事件处理程序执行此操作。

addEventListener 变化没有触发事件

addEventListener change not triggered the event

html

javascript

jquery

dropdown