addeventlistener更改未触发事件

kd3sttzy 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(323)

我遇到了一个问题，代码在JSFIDLE中运行良好，但当重新定位到实际工作区时，它不工作。已经放置了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>

jquery JavaScript Html dropdown

来源：https://stackoverflow.com/questions/68494268/addeventlistener-change-not-triggered-the-event

2条答案

按热度按时间

2j4z5cfb1#

我已将代码更新如下：
注意：检查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>

赞(0）回复(0）举报 2021-09-13

cygmwpex2#

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

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

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

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

赞(0）回复(0）举报 2021-09-13

我来回答

addeventlistener更改未触发事件

2条答案

相关问题

热门标签

最新问答