Question

我正在尝试在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>

Answer 1

我认为问题不是getElementById returns null

但此行

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

请问您是否确实将值存储在本地存储中？

找到您的元素，检查错误之前的结果（本地存储安全性错误，特定于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>

Answer 2

也许您的本地存储阵列有更多问题？如果我手动归档代码，则循环将运行并找到对象。

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/

即使在HTML中，getElementById也返回null

2 个答案: