代码在窗口视图中只能运行一次，但是在“ DevTools”选项卡中时可以多次运行

Question

我正在尝试制作一个可由用户多次调用的脚本。每次接收信息。正常情况下，查看页面时，用户只能提取一次数据，然后再提取任何数据。但是，在DevTools中，一切似乎都可以正常工作。

    <p id="result" style="line-height: 0.25; margin-left: 2.5%; "> </p>


<button onclick="showTest(<?php echo $test['id'];?>)"> Click Me</button>

<script>
function showTest(str) {
  var xhttp; 

  if (str == "") {
    document.getElementById("result").innerHTML = "";
    return;
  } else {
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("result").innerHTML = this.responseText;
    }
    }
  };

  xhttp.open("GET", "Test.php?q="+str, true);
  xhttp.send();
}
</script>

每次单击按钮时，我都希望#result充满新获取的数据。但这并没有做到。任何帮助表示赞赏！ ：）