getElementById возвращает null, даже если его в HTML

Я пытаюсь найти свой элемент в своем 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="#"> Sok 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>Anvandare:</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>

javascript,html,

0

Ответов: 2

0

Я считаю, что проблема не получается getElementById returns null

но эта строка

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

Не могли бы вы указать, действительно ли вы храните значение в localstorage?

Элемент найден, проверьте результат перед ошибкой (ошибка безопасности 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="#"> Sok 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>Anvandare:</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>

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/

JavaScript, HTML,
Похожие вопросы
Яндекс.Метрика