我是 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 文件在浏览器中打开为空，并出现错误找不到您的文件 我通过重复 document.get... 逃脱了它。请帮我解决事件问题。
最佳答案
将所有 addEventListsener 代码更改为如下所示:
document.getElementById('editLocation').addEventListener('change',changeStuff)
应该是changeStuff而不是changeStuff()
使用()，一旦文档准备好，该函数就会被调用。
关于javascript - 更改事件后未调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53763271/