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", 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);
}