xmlHttpRequest 正在阻止其他功能

Question

我正在使用 Js xmlHttpRequest 在我网站的不同页面上显示相同的菜单。最近发现有些功能在网站上线的时候不执行，就像我做的一个小测验

我也尝试过使用 fetch，或者将脚本放在不同的文件中，但同样的事情不断发生。

（在本地检查时，测验有效，无法满足xml请求。）

//load the menu
onload = function loadXMLDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementsByTagName('body')[0].innerHTML +=
        this.responseText;
      }
    };
    xhttp.open("GET", "mnu.html", true);
    xhttp.send();
  }
  
  //check the quiz
  const checkBtn = document.getElementById('checkBtn')
checkBtn.onclick = function quizCheck() {
    //right answers
    var score = 0;
    if (q1a1.checked) {
        score = score + 1;
    }
    if (q2a1.checked) {
        score = score + 1;
    }
    alert("your score: " + score);
}

<li>
    Check the right answer:
        <br>
    <input type="checkbox" id="q1a1">Right
        <br>
    <input type="checkbox">Wrong
</li>

<li>
    Check the right answer:
        <br>
    <input type="checkbox" id="q2a1">Right
        <br>
    <input type="checkbox">Wrong
</li>

<button id="checkBtn">Check</button>

有人知道为什么 and/or 有一些解决方案吗？

Answer 1

问题是这一行是错误的，这就是 js 不工作的原因。

document.getElementsByTagName('body')[0].innerHTML += this.responseText;

您不能像那样只添加到 innerHtml。相反，您应该创建一个 html 元素并将其添加到 body 中，如下所示：

if (this.readyState == 4 && this.status == 200) {
    var p = document.createElement("p");
    p.innerText = this.responseText;
    document.body.appendChild(p);
}

编辑：当然你想添加一个 html 菜单而不只是 <p> 中的文本，所以你必须像这样添加它：

var nav = document.createElement('nav');
nav.innerHTML = this.responseText;
document.body.prepend(nav); // always at the top

xmlHttpRequest 正在阻止其他功能

xmlHttpRequest is blocking other functions

javascript

xml

checkbox

alert

xmlhttprequest