堆栈内存溢出
  繁体   English   中英

addEventListener 更改未触发事件

[英]addEventListener change not triggered the event

 原文  2021-07-23 05:01:24  3   2    javascript/ html/ jquery/ dropdown

问题描述

我遇到了一个问题，代码工作正常是 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>

2 个解决方案

解决方案1
 0 已采纳  2021-07-23 05:46:10

我已更新代码如下：

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

解决方案2
 0  2021-07-23 05:51:25

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

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

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 触发单击事件：未触发addEventListener 更改事件后的 addEventListener addEventListener ' load ' 事件未触发 addEventListener不会触发元素的更改事件 jQuery触发时，不会触发通过addEventListener（）添加的事件 在没有触发事件的情况下调用Javascript addEventListener函数 JavaScript图像源更改addEventListener“单击”事件 使用addEventListener添加的fire change事件 jQuery更改事件未正确触发 更改事件未使用 blur() 方法触发
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM