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>

有人知道原因和/或有一些解决方案吗？

Answer 1

问题是这条线是错误的，这就是js不起作用的原因。

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

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

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

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

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