首页 > 解决方案 > 更改事件后未调用函数

问题描述

我是 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.... 请帮我解决事件的问题。

标签: javascripthtml

解决方案


将所有addEventListsener代码更改为:

document.getElementById('editLocation').addEventListener('change', changeStuff)

changeStuff不应该changeStuff()

文档准备好后,()将立即调用该函数。


推荐阅读