addEventListener 更改未触发事件答案

【问题标题】：addEventListener change not triggered the eventaddEventListener 更改未触发事件
【发布时间】：2021-09-30 06:59:35
【问题描述】：

我遇到了一个问题，JSfiddle 的代码工作正常，但是当重新定位到实际工作区时它不起作用。已经放了JS库

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

非常感谢任何帮助！

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>

【问题讨论】：

浏览器控制台中的任何错误？也许你的代码在元素存在之前就已经运行了——一个常见的错误
嗨@Bravo，它显示了这个 Uncaught TypeError: Cannot read property 'addEventListener' of null
正是因为我刚才所说的问题 - 您的代码在元素存在之前运行 - 将脚本移动到 HTML 的末尾
我需要做什么才能使其正常工作？非常感谢任何帮助..
正如我之前所说的那样 - 将脚本移动到 HTML 的末尾 - 即在 body 标签结束之前

标签： javascript html jquery dropdown

【解决方案1】：

如果您使用 jQuery，为什么不使用它的 API 进行事件处理？

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

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

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

【讨论】：

【解决方案2】：

我已将代码更新如下：

注意：检查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>

【讨论】：