无法让 Javascript 使用 JSON/Flask 响应来重定向到新页面并更新其 DOM

Question

我正在构建一个聊天应用程序，与Slack不同。我向用户显示一个页面，可以在其中输入频道名称channels.html.以下 Javascript 成功捕获条目，将其抛出到适当的 Flask 路由，并接收 JSON 响应，它通过构造存储在contents中的<div>来处理该响应。

期望的行为：我在表单提交到messages.html时立即重定向，并且 DOM 元素#channelList更改。我有三倍

我以为我可以通过用windows.location.href翻页并更改所需元素的.innerHTML属性来按顺序执行此操作，但这是不行的，我在控制台中Uncaught TypeError: Cannot read property 'querySelector' of null，引用行document.querySelector('#channelList').innerHTML += contents;。该元素非常多并且拼写正确。什么给？

Javascript：

(function() {
var form = document.querySelector('#channelForm'),
button = form.querySelector('input.btn-primary');
if (!button) console.log('move your js below your html')
console.log('binding listener to', button);
button.addEventListener('click', function(e) {
e.preventDefault();
console.log('process form data!');
console.log("here");
// initialize request
const request = new XMLHttpRequest();
const channelName = document.querySelector('#channelName').value;
request.open('POST', '/channels');
request.onload = () => {
// Extract JSON data from request
const data = JSON.parse(request.responseText);
console.log(data);
// Update the result div
if (data.success == true) {
let contents = ""; 
for (let i = 0, j = data["channel"].length; i < j; i++) {
contents += "<div>" + data["channel"][i] + "</div>";
console.log(contents);
}
window.location.href = Flask.url_for("messages");
document.querySelector('#channelList').innerHTML += contents;
} else {
console.log("error");
}
};
// Add data to send with request
const data = new FormData();
data.append('channel', channelName);
// Send request to Flask
request.send(data);
//return false;
});
})()

元素存在的页面的 HTML，但控制台说它们是空

的

<div class="col-md-3 border border-danger rounded">
<div class="row mt-2 justify-content-start">
Header
</div>
<div class="row mt-2 justify-content-start" id="channelHeader">
<a href="{{ url_for('channels') }}">Channels</a>
</div>
<div class="row mt-2 justify-content-start" id="channelList">
Channels
</div>
&nbsp;
<div class="row justify-content-start" id="dmsg">
Direct Messages
</div>
</div>

Answer 1

此特定错误由第 #3 行引起：

var form = document.querySelector('#channelForm'),
button = form.querySelector('input.btn-primary');

从您提供的代码来看，您提到的 id (channelList( 存在，但它看起来不像它前面的元素 channelForm 存在。至少在这里显示的内容中。