0

我试图在我的 HTML 文件中找到我的元素，但它返回 null 即使它在那里。我找不到我的代码有什么问题，在 html 中也没有。我在 stackoverflow 上阅读了其他建议的线程，并且已经将其包装在 onload 函数中，但它似乎仍然不起作用。

这是我的 JS 文件

window.onload = run();
function run(){
  var archived = localStorage.getItem("arkiv");
  console.log(archived)
  var array = archived.split(",");
  for(var i = 0; i < array.length; i++){
    console.log(array[i])
    var getUL = document.getElementById("archivedmovies")
    console.log(getUL)
    var li = document.createElement(li);
    li.innerHTML = array[i];
    getUL.appendChild(li);
  }
};

这是 HTML 文件

<!DOCTYPE html>
    <html lang="sv">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
        <link rel="apple-touch-icon" href="anton.jpg">
        <meta name="apple-mobile-web-app-title" content="Movietime">
        <link rel="stylesheet" href="css.css">
        <link rel="manifest" href="manifest.js">
        <meta name="mobile-web-app-capable" content="yes">
        <link rel="icon" sizes="192x192" href="anton.png">
        <title>Film-appen</title>
      </head>
      <body>
        <div id="wrapper">

                <!-- Navigation -->
                <nav class="navbar navbar-inverse navbar-fixed-top">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="index.html">Film-appen</a>
                    </div>

                    <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                        <ul class="nav navbar-nav side-nav">
                            <li>
                                <a href="#"> Sök film</a>
                            </li>
                            <li>
                                <a href="inst.html">Ladda upp filer</a>
                            </li>
                            <li>
                                <a href="files.html"> Mina uppladdningar</a>
                            </li>
                            <li>
                                <a href="#">Mitt filmbibliotek</a>
                            </li>
                            <li class="container" id="userinfo">
                              <p><strong>Användare:</strong></p>
                              <p> Philip </p>
                              <p><strong>Favoritfilm:</strong></p>
                              <p id="getFavMovie">  </p>
                            </li>
                        </ul>
                    </div>
              </nav>
        </div>
        <div class="container" id="archivedmovies">
          <h4 class="text-center"> Arkiverade filmer </h4>
          <ul id="listofmovies">

          </ul>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="js.js"> </script>
      </body>
    </html>
4

2 回答 2

0

我相信问题是没有得到getElementById returns null

但是这条线

  var archived = localStorage.getItem("arkiv");

您能否指定您是否真的将值存储在本地存储中？

找到你的元素，检查错误前的结果（localstorage安全错误，stackoverflow特有）

window.onload = run();
function run(){
  console.log(document.getElementById("archivedmovies"));
  var archived = localStorage.getItem("arkiv");
  console.log(archived)
  var array = archived.split(",");
  for(var i = 0; i < array.length; i++){
    console.log(array[i])
    var getUL = document.getElementById("archivedmovies")
    console.log(getUL)
    var li = document.createElement(li);
    li.innerHTML = array[i];
    getUL.appendChild(li);
  }
};
<!DOCTYPE html>
    <html lang="sv">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
        <link rel="apple-touch-icon" href="anton.jpg">
        <meta name="apple-mobile-web-app-title" content="Movietime">
        <link rel="stylesheet" href="css.css">
        <link rel="manifest" href="manifest.js">
        <meta name="mobile-web-app-capable" content="yes">
        <link rel="icon" sizes="192x192" href="anton.png">
        <title>Film-appen</title>
      </head>
      <body>
        <div id="wrapper">

                <!-- Navigation -->
                <nav class="navbar navbar-inverse navbar-fixed-top">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="index.html">Film-appen</a>
                    </div>

                    <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                        <ul class="nav navbar-nav side-nav">
                            <li>
                                <a href="#"> Sök film</a>
                            </li>
                            <li>
                                <a href="inst.html">Ladda upp filer</a>
                            </li>
                            <li>
                                <a href="files.html"> Mina uppladdningar</a>
                            </li>
                            <li>
                                <a href="#">Mitt filmbibliotek</a>
                            </li>
                            <li class="container" id="userinfo">
                              <p><strong>Användare:</strong></p>
                              <p> Philip </p>
                              <p><strong>Favoritfilm:</strong></p>
                              <p id="getFavMovie">  </p>
                            </li>
                        </ul>
                    </div>
              </nav>
        </div>
        <div class="container" id="archivedmovies">
          <h4 class="text-center"> Arkiverade filmer </h4>
          <ul id="listofmovies">

          </ul>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="js.js"> </script>
      </body>
    </html>

于 2018-08-24T10:49:16.797 回答
0

看起来您的本地存储阵列可能有更多问题？如果我手动存档代码，则运行循环并找到对象....

window.onload = run();
function run(){
  var archived = 'asddasdasd,asdsdasdas'
  console.log(archived)
  var array = archived.split(",");
  for(var i = 0; i < array.length; i++){
    console.log(array[i])
    var getUL = document.getElementById("archivedmovies")
    alert(getUL);
    var li = document.createElement(li);
    li.innerHTML = array[i];
    getUL.appendChild(li);
  }
}

http://jsfiddle.net/1hwdaL4c/3/

于 2018-08-24T10:53:16.027 回答