JavaScript 功能仅在页面重新加载后有效答案

【问题标题】：JavaScript function only works after page reloadJavaScript 功能仅在页面重新加载后有效
【发布时间】：2020-06-25 17:07:54
【问题描述】：

我知道这个问题在这里被问了很多，但是所有的答案都只适用于 jQuery，我需要一个没有它的解决方案。

所以在我做某事之后，我的 Servlet 将我带到一个 JSP 页面。加载页面时，我的 JS 函数应该填充一个下拉列表。它只有在页面刷新时才能正常工作。

据我了解，这是因为我想填充，使用 innerHTML 并且 JS 函数的调用速度比我的 HTML 页面快。

我的浏览器中也出现此错误：

Uncaught TypeError: Cannot read property 'innerHTML' of null
at XMLHttpRequest.xmlHttpRequest.onreadystatechange

我有一个调试方案，但我不能把它留在那里。我所做的是，每次打开该页面时，我都会自动刷新整个页面。但是我的浏览器每次都问我是否想这样做。因此，至少可以说这不是一个很好的解决方案。

我可以做些什么来防止这种情况发生吗？

编辑：

    document.addEventListener("DOMContentLoaded", pupulateDropDown);
function pupulateDropDown() {
  var servletURL = "./KategorienHolen"
  let xmlHttpRequest = new XMLHttpRequest();

  xmlHttpRequest.onreadystatechange = function () {
    if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {

      console.log(xmlHttpRequest.responseText);

      let katGetter = JSON.parse(xmlHttpRequest.responseText);
      JSON.stringify(katGetter);

        var i;
    for(i = 0; i <= katGetter.length -1; i++){
      
       
      console.log(katGetter[i].id);
      console.log(katGetter[i].kategorie);
      console.log(katGetter[i].oberkategorie);
    
       if (katGetter[i].oberkategorie === "B") {

        document.getElementById("BKat").innerHTML += "<a href=" + "DisplayKlamotten" + "?searchfor=" + katGetter[i].kategorie + ">" + katGetter[i].kategorie + "</a></br>";
      
      } else if (katGetter[i].oberkategorie === "S") {    
           
        document.getElementById("SKat").innerHTML += "<a href=" + "DisplayKlamotten" + "?searchfor=" + katGetter[i].kategorie + ">" + katGetter[i].kategorie + "</a></br>";

      } else if (katGetter[i].oberkategorie ==="A") {

        document.getElementById("ACat").innerHTML += "<a href=" + "DisplayKlamotten" + "?searchfor=" + katGetter[i].kategorie + ">" + katGetter[i].kategorie + "</a></br>";
      }


      // document.getElementsByClassName("innerDiv").innerHTML = "<a href=" + "DisplayKlamotten" + "?=" + katGetter.kategorie + ">" + katGetter.kategorie + "</a>";
      // document.getElementById("test123").innerHTML = "<a href=" + "DisplayKlamotten" + "?searchfor=" + katGetter.kategorie + ">" + katGetter.kategorie + "</a>";

    }



    }
  };
  xmlHttpRequest.open("GET", servletURL, true);
  xmlHttpRequest.send();
}

【问题讨论】：

请提供minimal reproducible example
确保你的JS在DOM content has loaded之后运行。
我编辑了代码。我想在加载 JS 之前等待 1 秒。

标签： javascript html

【解决方案1】：

这取决于您执行代码时的 + 方式。

<html>
  <head>
  <title>In Head Not Working</title>
  <!-- WILL NOT WORK -->
  <!--<script>
     const p = document.querySelector('p');
     p.innerHTML = 'Replaced!';
  </script>-->
  </head>
  <body>
  <p>Replace This</p>
  <!-- Will work because the page has finished loading and this is the last thing to load on the page so it can find other elements -->
  <script>
     const p = document.querySelector('p');
     p.innerHTML = 'Replaced!';
  </script>
  </body>
</html>

此外，您可以添加一个事件处理程序，以便当窗口完全加载时，您可以找到 DOM 元素。

<html>
  <head>
    <title>In Head Working</title>
    <script>
      window.addEventListener('load', function () {
        const p = document.querySelector('p');
        p.innerHTML = 'Replaced!';
      });
    </script>
  </head>
  <body>
    <p>Replace This</p>
  </body>
</html>

【讨论】：

【解决方案2】：

定义您的function 并将onload 事件添加到body：

<body onload="pupulateDropDown()">
    <!-- ... -->
</body>

【讨论】：

【解决方案3】：

脚本需要再次加载，我尝试了很多选项，但 <iframe/> 在我的情况下效果更好。您可以尝试对与您的脚本相关的库进行 npm import，也可以使用以下代码。

<iframe
        srcDoc={`
          <!doctype html>
          <html>
            <head>
              <style>[Style (If you want to)]</style>
            </head>
            <body>
              <div>
                [Your data]
                <script type="text/javascript" src="[Script source]"></script>
              </div>
            </body>
          </html>
        `}
      />

在 srcDoc 内部，它类似于普通的 HTML 代码。

您可以在 srcDoc 中使用${[Your Data]} 加载数据。

【讨论】：

【解决方案4】：

它应该可以工作：

document.addEventListener("DOMContentLoaded", function(){
    //....
});

【讨论】：

【解决方案5】：

只有在文档完全加载并且所有元素都已解析时，您才应该使用DOMContentLoaded 事件来运行您的代码。

window.addEventListener("DOMContentLoaded", function(){
   //your code here
});

或者，将 script 标签放在结尾 body 标签之前。

<body>
<!--body content...-->
<script>
//your code here
</script>
</body>

【讨论】：

当我安装了 DomContentLoaded 的 onload 时，我会以某种方式获取每个数据两次。
@D.Doe 什么数据？
@D.Doe 你得到两次是什么意思？
所以我的 Javascript 函数从一个 servlet 获取一个数组列表。我将数组元素解析为 JSON 对象并将其传递给我的 JSP 文件。当我使用 Onload 的 DomContentLoaded 时，由于某种原因，脚本会执行两次。
@D.Doe 尝试将console.log("some message") 添加到方法的顶部，以便您可以通过打开浏览器控制台查看调用它的位置。