为什么我的函数无法加载JSON数据并似乎带来随机的未定义错误？

Question

我正在使用菜单项上的点击事件来更新div（#App）的内容，我需要填充一个列表，该列表使用JSON数据加载到div中。那里没有问题，我运行了一个执行一些操作的函数，包括用<select>值填充<option>列表，清除div上的类并向ID添加“映射”的适当类导航项的内容，以便我可以使用当前类运行if语句，并更新菜单以反映活动的“页面”。我的问题是，看起来似乎是随机的，列表不会填充，并且控制台记录错误

  

未捕获的类型错误：空的不能设置属性 '的innerHTML'“

在错误被引用该追加与ID列表我的输出变量schoolSelect。我不知道为什么有时功能运行得很好，有时却不能。这似乎是随机的。如果可以的话，我会以不同的方式进行操作，但是我正在对该应用程序进行一些限制，并且只需要弄清楚为什么会发生这种情况，就可以继续处理JSON数据并做更多的事情。

我尝试不使用jquery而是运行xhttp请求，但是它什么也不做。我尝试将函数放置在不同的位置，并在不同的事件上运行该函数，放置jQuery以获取JSON数据并在click函数中呈现列表，我将其放置在单独的函数中，我似乎无法解决问题后，似乎是随机不触发。

代码

populateList = function() {
  $.getJSON("/assets/JSON/schools.JSON", function(result) {
    var schools = result.schools;
    var output = '';
    for (var i = 0; i < schools.length; i++) {
      output += '<option>' + schools[i].name + '</option>';
    }
    document.getElementById('schoolSelect').innerHTML = output;
  });
}
populateTable = function() {
  $.getJSON("/assets/JSON/schools.JSON", function(result) {
    var schools = result.schools;
    var output = '';
    for (var i = 0; i < schools.length; i++) {
      output += '<option>' + schools[0].zones[i].name + '</option>'
    }
    document.getElementById('zoneSelect').innerHTML = output;
  });
}


$(document).ready(function() {
  $("#alert").click(function(e) {
    if ($("#App").hasClass("alertDashboard")) {
      // Do Nothing
    } else {
      e.stopPropagation();
      $("#App").removeClass()
      $("#App").addClass("container")
      $("#App").load("../html/Dashboards/AlertDashboard.html")
      populateList()
      $(".menuItem").removeClass("active")
      $("#alert").addClass("active")
      $("#App").addClass("alertDashboard")
    }
  })
});
$(document).ready(function() {
  $("#chat").click(function(e) {
    if ($("#App").hasClass("chatDashboard")) {
      // Do Nothing
    } else {
      e.stopPropagation();
      $("#App").removeClass()
      $("#App").addClass("container")
      $("#App").load("../html/Dashboards/ChatDashboard.html")
      populateList()
      $(".menuItem").removeClass("active")
      $("#chat").addClass("active")
      $("#App").addClass("chatDashboard")
    }
  })
});
$(document).ready(function() {
  $("#schoolInfo").click(function(e) {
    if ($("#App").hasClass("infoDashboard")) {
      // Do Nothing
    } else {
      e.stopPropagation();
      $("#App").removeClass()
      $("#App").addClass("container")
      $("#App").load("../html/Dashboards/InfoDashboard.html")
      populateTable()
      $(".menuItem").removeClass("active")
      $("#schoolInfo").addClass("active")
      $("#App").addClass("infoDashboard")
    }
  })
})
$(document).ready(function() {
  $("#savedData").click(function(e) {
    if ($("#App").hasClass("savedDashboard")) {
      // Do Nothing
    } else {
      e.stopPropagation()
      $("#App").removeClass()
      $("#App").addClass("container")
      $("#App").load("../html/Dashboards/SavedDashboard.html")
      $(".menuItem").removeClass("active")
      $("#savedData").addClass("active")
      $("#App").addClass("savedDashboard")
    }
  })
})

<div class="container-fluid">
  <div class="sidebar">
    <div class="menuItem" style="border-bottom: none;padding:10px;text-align: 
              center;">
      <img src="/assets/images/lockout-logo-white.png" class="app-logo" />
    </div>
    <div class="menuItem active" id="alert">
      Lockdown Alert<img src="/assets/images/lock-alt.svg" />
    </div>
    <div class="menuItem" id="chat">
      Chat<img src="/assets/images/comment-dots.svg" />
    </div>
    <div class="menuItem" id="schoolInfo">
      School Info<img src="/assets/images/school.svg" />
    </div>
    <div class="menuItem" id="savedData">
      Saved Data<img src="/assets/images/save.svg" />
    </div>
  </div>
</div>
<div class="container alertDashboard" id="App">
  <h1>Alert Dashboard</h1>
  <div class="row">
    <div class="col-md-3 schoolList" id="listDiv">
      <div class="listHeader">
        <h5>Please select a school</h5>
        <p>Hold ctrl to select more than one school</p>
      </div>
      <select size="100" multiple id="schoolSelect" class="school_select"></select>
      <!-- <div id="infoDiv">
                <p>Drag the cursor, or hold CTRL to select multiple</p>
              </div> -->
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-12">
          <!-- <img id="stage2Img" draggable="false" 
                        opacity="0.85" 
                        src="../assets/images/stage_2_up.png"/> -->
          <div class="alertStageInner">
            <div class="alertHeader">
              <img src="/assets/images/stage2Image.png" />
              <h2>Alert Level 2</h2>
              <h3>Soft Lockdown</h3>
            </div>
            <div class="alertBody">
              <p>
                Locks down school due to immediate, non-life threatening situation
              </p>
              <button id="stage2Div">Initiate Lockdown</button>
            </div>
          </div>
          <!-- <img id="stage3Img" draggable="false" opacity="0.85" src="../assets/images/stage_3_up.png"/> -->
          <div class="alertStageInner" style="margin-top: 24px">
            <div class="alertHeader">
              <img src="/assets/images/stage3Image.png" />
              <h2>Alert Level 3</h2>
              <h3>Full Lockdown</h3>
            </div>
            <div class="alertBody">
              <p>
                Locks down school due to immediate, life threatening situation
              </p>
              <button id="stage3Div">Initiate Lockdown</button>
            </div>
          </div>
        </div>
        <div class="col-md-5"></div>
      </div>
    </div>
  </div>
</div>
</div>
</div>

说明

正如你可能会说，ID为应用程序的DIV是一个由功能的影响。此过程在大多数情况下都有效，但是由于某种原因，有时偶尔会一次，似乎是随机的，它会出错，并且不填充schoolSelect或zoneSelect列表，并且我得到了空错误，如前所述。任何帮助是极大的赞赏。

Answer 1

$("#App").load("../html/Dashboards/InfoDashboard.html")是异步的，因此任何依赖于其对DOM更改的操作都需要在回调函数中完成。

$("#App").load("../html/Dashboards/InfoDashboard.html", function() {
    populateList();
});