addeventlistener更改未触发事件

kd3sttzy  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(397)

我遇到了一个问题，代码在JSFIDLE中运行良好，但当重新定位到实际工作区时，它不工作。已经放置了js库
问题是，监听器不是由jquery事件触发的。下面是一些简单的代码来说明这个问题。请注意，问题来自addeventlistener或代码语法。我需要对当前代码进行任何更改吗？
非常感谢您的帮助！。
js

  1. const length_field = document.querySelector('#unitlength');
  3. const width_field = document.querySelector('#unitwidth');
  5. const area_field = document.querySelector('#unitarea');
  7. const unit_field = document.querySelector('#unitmeasure');
  9. length_field.addEventListener('change', function(e) {
  10.   // using condition 
  11.   if (this.value === "feet") {
  12.     area_field.value = "feet";
  13.     width_field.value = "feet";
  14.     unit_field.value = "imperial";
  15.   } else if (this.value === "meter") {
  16.     area_field.value = "meter";
  17.     width_field.value = "meter";
  18.     unit_field.value = "metric";
  19.   } else {
  20.     // do nothing by default 
  21.   }
  22. });
  24. width_field.addEventListener('change', function(e) {
  25.   // using condition 
  26.   if (this.value === "feet") {
  27.     area_field.value = "feet";
  28.     length_field.value = "feet";
  29.     unit_field.value = "imperial";
  30.   } else if (this.value === "meter") {
  31.     area_field.value = "meter";
  32.     length_field.value = "meter";
  33.     unit_field.value = "metric";
  34.   } else {
  35.     // do nothing by default 
  36.   }
  37. });
  39. area_field.addEventListener('change', function(e) {
  40.   // using condition 
  41.   if (this.value === "feet") {
  42.     length_field.value = "feet";
  43.     width_field.value = "feet";
  44.     unit_field.value = "imperial";
  45.   } else if (this.value === "meter") {
  46.     length_field.value = "meter";
  47.     width_field.value = "meter";
  48.     unit_field.value = "metric";
  49.   } else {
  50.     // do nothing by default 
  51.   }
  52. });
  54. unit_field.addEventListener('change', function(e) {
  55.   // using condition 
  56.   if (this.value === "feet") {
  57.     length_field.value = "feet";
  58.     width_field.value = "feet";
  59.     unit_field.value = "imperial";
  60.   } else if (this.value === "meter") {
  61.     length_field.value = "meter";
  62.     width_field.value = "meter";
  63.     unit_field.value = "metric";
  64.   } else {
  65.     // do nothing by default 
  66.   }
  67. });
  1. <head>
  2.   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  4. </head>
  6. <label for="unitlength">Length </label>
  7.    <select id="unitlength" name="unitlength">
  8.      <option value="" selected="selected">--Unit--</option>
  9.      <option value="feet">feet</option>
  10.      <option value="meter">meter</option>
  11.    </select>
  13.    <label for="unitwidth">Width </label>
  14.    <select id="unitwidth" name="unitwidth">
  15.      <option value="" selected="selected">--Unit--</option>
  16.      <option value="feet">feet</option>
  17.      <option value="meter">meter</option>
  18.    </select>
  20.    <label for="unitarea">Area </label>
  21.    <select id="unitarea" name="unitarea">
  22.      <option value="" selected="selected">--Unit--</option>
  23.      <option value="feet">sqft.</option>
  24.      <option value="meter">m2</option>
  25.    </select>
  27.      <label for="unitmeasure"> Unit</label>
  28.      <select class="list-dt" id="unitmeasure" name="unitmeasure">
  29.        <option value="" selected="selected" disabled> -Unit-</option>
  30.        <option value="imperial" disabled>imperial</option>
  31.        <option value="metric" disabled>metric</option>
  32.      </select>
jqueryJavaScriptHtmldropdown

2条答案

按热度按时间
2j4z5cfb

2j4z5cfb1#

我已将代码更新如下：
注意：检查javascript代码的位置。

  1. <html>
  3. <style>
  5. </style>
  7. <body>
  8.  <head>
  9.   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  11. </head>
  13. <label for="unitlength">Length </label>
  14.    <select id="unitlength" name="unitlength">
  15.      <option value="" selected="selected">--Unit--</option>
  16.      <option value="feet">feet</option>
  17.      <option value="meter">meter</option>
  18.    </select>
  20.    <label for="unitwidth">Width </label>
  21.    <select id="unitwidth" name="unitwidth">
  22.      <option value="" selected="selected">--Unit--</option>
  23.      <option value="feet">feet</option>
  24.      <option value="meter">meter</option>
  25.    </select>
  27.    <label for="unitarea">Area </label>
  28.    <select id="unitarea" name="unitarea">
  29.      <option value="" selected="selected">--Unit--</option>
  30.      <option value="feet">sqft.</option>
  31.      <option value="meter">m2</option>
  32.    </select>
  34.      <label for="unitmeasure"> Unit</label>
  35.      <select class="list-dt" id="unitmeasure" name="unitmeasure">
  36.        <option value="" selected="selected" disabled> -Unit-</option>
  37.        <option value="imperial" disabled>imperial</option>
  38.        <option value="metric" disabled>metric</option>
  39.      </select>
  41.   <script>
  43.   const length_field = document.querySelector('#unitlength');
  45. const width_field = document.querySelector('#unitwidth');
  47. const area_field = document.querySelector('#unitarea');
  49. const unit_field = document.querySelector('#unitmeasure');
  51. length_field.addEventListener('change', function(e) {
  52.   // using condition 
  53.   if (this.value === "feet") {
  54.     area_field.value = "feet";
  55.     width_field.value = "feet";
  56.     unit_field.value = "imperial";
  57.   } else if (this.value === "meter") {
  58.     area_field.value = "meter";
  59.     width_field.value = "meter";
  60.     unit_field.value = "metric";
  61.   } else {
  62.     // do nothing by default 
  63.   }
  64. });
  66. width_field.addEventListener('change', function(e) {
  67.   // using condition 
  68.   if (this.value === "feet") {
  69.     area_field.value = "feet";
  70.     length_field.value = "feet";
  71.     unit_field.value = "imperial";
  72.   } else if (this.value === "meter") {
  73.     area_field.value = "meter";
  74.     length_field.value = "meter";
  75.     unit_field.value = "metric";
  76.   } else {
  77.     // do nothing by default 
  78.   }
  79. });
  81. area_field.addEventListener('change', function(e) {
  82.   // using condition 
  83.   if (this.value === "feet") {
  84.     length_field.value = "feet";
  85.     width_field.value = "feet";
  86.     unit_field.value = "imperial";
  87.   } else if (this.value === "meter") {
  88.     length_field.value = "meter";
  89.     width_field.value = "meter";
  90.     unit_field.value = "metric";
  91.   } else {
  92.     // do nothing by default 
  93.   }
  94. });
  96. unit_field.addEventListener('change', function(e) {
  97.   // using condition 
  98.   if (this.value === "feet") {
  99.     length_field.value = "feet";
  100.     width_field.value = "feet";
  101.     unit_field.value = "imperial";
  102.   } else if (this.value === "meter") {
  103.     length_field.value = "meter";
  104.     width_field.value = "meter";
  105.     unit_field.value = "metric";
  106.   } else {
  107.     // do nothing by default 
  108.   }
  109. });
  110.     </script>
  111. </body>
展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
cygmwpex

cygmwpex2#

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

  1. $(document).ready(function () {
  2.   const length_field = $("#unitlength");
  3.   // other variables here
  5.   length_field.on('change', function () {});
  6.   // other jQuery code here
  7. });

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

赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com