我遇到了一个问题,代码在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>
2条答案
按热度按时间2j4z5cfb1#
我已将代码更新如下:
注意:检查javascript代码的位置。
cygmwpex2#
如果您使用jquery,为什么不使用它的api进行事件处理?
您可以使用所有元素和事件处理程序执行此操作。