Я использую события щелчка по пунктам меню для обновления содержимого div (#App), и мне нужно заполнить список, который загружен в div, данными JSON.Никаких проблем, я запускаю функцию, которая выполняет несколько действий, включая заполнение списка <select> значениями <option>, очистку классов в div и добавление соответствующего класса, который «сопоставлен» с идентификатором элемента navпоэтому я могу выполнять операторы if, используя текущий класс, и обновлять меню, чтобы отображать активную «страницу».Моя проблема в том, что, казалось бы, случайным образом, список не будет заполняться, и консоль регистрирует ошибку
Uncaught TypeError: Невозможно установить свойство 'innerHTML' для null "
Ошибка ссылается на мою выходную переменную, которая добавляет список с идентификатором schoolSelect. Я не могу понять, почему иногда функция работает идеально, а иногда нет. Кажется, это происходит наугад. Я хотел бы сделать этопо-другому, если бы я мог, но я работаю с некоторыми ограничениями для этого приложения и просто должен выяснить, почему это происходит, чтобы я мог двигаться дальше и делать больше с данными JSON.
Я пыталсяЯ не использую jquery и не выполняю запрос xhttp, но он ничего не делает. Я попытался разместить функцию в разных местах и запустить функцию в разных событиях, поместив jQuery для получения данных JSON и рендеринга списка внутри функций щелчка.Я поместил его в отдельные функции, я не могу решить проблему, кажется, что это случайнокольцо.
Код
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>
Объяснение
Как вы, вероятно, можете сказать, div с ID App - это тот, на который влияют функции.Этот процесс прекрасно работает большую часть времени, но по какой-то причине, время от времени, опять же, на первый взгляд, наугад, он выдает ошибку, и списки schoolSelect или zoneSelect не заполняются, и я получаю нулевую ошибку, как объяснено ранее.Любая помощь очень ценится.