时间戳

首页 > 解决方案 > JavaScript 功能仅在页面重新加载后有效

javascript - JavaScript 功能仅在页面重新加载后有效

问题描述

我知道这个问题在这里被问了很多，但是所有的答案都只适用于 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();
}

标签： javascripthtml

解决方案

它可能取决于您执行代码时的 + 方式。

<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>

推荐阅读