javascript - 更改事件后未调用函数
问题描述
我是 JavaScript 新手。函数 changeStuff 仅执行一次(在文档准备好之后),但其他 onchange 事件不起作用。我想根据选择输入中的值来改变显示或隐藏的元素。这是代码。
function changeStuff() {
if (document.getElementById('editLocation').value == 'Resident') {
document.getElementById('editResidentZoneDiv').style.display = 'block';
document.getElementById('editNonResidentZoneDiv').style.display = 'none';
document.getElementById('editKmZoneDiv').style.display = 'none';
document.getElementById('editNonResidentZone').removeAttribute('required');
document.getElementById('editKmZone').removeAttribute('required');
} else if (document.getElementById('editLocation').value == 'Non-Resident') {
document.getElementById('editResidentZoneDiv').style.display = 'none';
document.getElementById('editNonResidentZoneDiv').style.display = 'block';
document.getElementById('editKmZoneDiv').style.display = 'none';
document.getElementById('editResidentZone').removeAttribute('required');
} else {
document.getElementById('editResidentZoneDiv').style.display = 'none';
document.getElementById('editNonResidentZoneDiv').style.display = 'none';
document.getElementById('editKmZoneDiv').style.display = 'none';
}
if (document.getElementById('editNonResidentZone').value == 'KM') {
document.getElementById('editKmZoneDiv').style.display = 'block';
} else {
document.getElementById('editKmZoneDiv').style.display = 'none';
}
}
if (document.readyState == 'complete') {
document.body.addEventListener('load', changeStuff())
}
document.getElementById('editLocation').addEventListener('change', changeStuff())
document.getElementById('editResidentZone').addEventListener('change', changeStuff())
document.getElementById('editNonResidentZone').addEventListener('change', changeStuff())
document.getElementById('editKmZone').addEventListener('change', changeStuff())
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron mx-auto">
<div>
<!-- Display student name here -->
John Doe
<hr>
</div>
<form action="" method="" id="updateData">
<div class="form-group" id="editLocationDiv">
<label for="editLocation">Edit Location</label>
<select class="form-control" name="editLocation" id="editLocation" required>
<option>Select</option>
<option>Non-resident</option>
<option>Resident</option>
</select>
</div>
<div class="form-group" id="editResidentZoneDiv">
<label for="editResidentZone">Resident Zone</label>
<select class="form-control" name="editResidentZone" id="editResidentZone" required>
<option>Select</option>
<option>Nyayo</option>
<option>Eastern</option>
<option>Western</option>
</select>
</div>
<div class="form-group" id="editNonResidentZoneDiv">
<label for="editNonResidentZone">Non-Residence Zone</label>
<select class="form-control" name="editNonResidentZone" id="editNonResidentZone" required>
<option>Select</option>
<option>KM</option>
<option>two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
</select>
</div>
<div class="form-group" id="editKmZoneDiv">
<label for="editKmZone">KM zones</label>
<select class="form-control" name="editKmZone" id="editKmZone" required>
<option>Select</option>
<option>Hostel1</option>
<option>Hostel2</option>
<option>Hostel3</option>
<option>Hostel4</option>
<option>Hostel5</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script src="main.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
我之前遇到的一个问题是,当我将每个文档对象分配给一个变量以减少我编写的代码时,html 文件在浏览器中打开为 null 并出现错误Your file was not found
,我通过重复document.get...
. 请帮我解决事件的问题。
解决方案
将所有addEventListsener
代码更改为:
document.getElementById('editLocation').addEventListener('change', changeStuff)
changeStuff
不应该changeStuff()
文档准备好后,()
将立即调用该函数。
推荐阅读
- javascript - 删除特定 div 中的标签“a”
- sql - 正则表达式,如何在双斜杠之间获取字符串?
- nginx - 具有公共 IP 地址的 HAProxy
- javascript - 如何在 WordPress 的外部可重用 javascript 文件中调用 jQuery.ajax?
- ansible - 如何使用 with_items/loops 从 ansible 输出中提取值
- javascript - Firestore 文档页面
- python - 为所有 Docker 容器配置 Http 代理
- tor - TOR 浏览器中的 Blazor 页面未呈现
- javascript - JQuery KeyEvents 被 PrimeFaces 的可选数据表阻止
- pdf - 如何提高从 PDF 生成的图像的质量?