Блог

Главная - Вопросы по программированию - цикл for не будет запускаться при запуске javascript

цикл for не будет запускаться при запуске javascript

#javascript

#javascript

Вопрос:

Я пытаюсь составить список задач и сохранить его в локальном хранилище, чтобы он был сохранен. Я запускаю функции get() и list () при запуске, чтобы извлечь их из localStorage и перечислить. Проблема в том, что цикл for не будет запускаться в функции list(). Как только я добавляю новый элемент и запускаю функцию newItem (), она извлекается из localStorage и выводит все это в порядке. Есть идеи?

 get();
list();
function Todo(name){
    this.name = name;
    this.completed = false;
}

function newItem(){
    var t = new Todo(document.getElementById("newItem").value)
    items.push(t)
    save();
    console.log(items)

}

function save(){
    var save = JSON.stringify(items)
    localStorage.setItem("localsave", save)
    list();
}

function list(name){
    var html = "";
    console.log(items)
    for(var i in items){
     var todo = items[i];
     var name = todo.name
     var completed = todo.completed;
     html  = "<li>" name "" completed "</li>"
    }
    $("#ul").html(html);
}
function get(){
    var temp = localStorage.getItem("localsave")
    items = JSON.parse(temp)


}

HTML-документ выглядит следующим образом, если кому-то это интересно

 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script src="todo.js"></script>
<form method="post" action="javascript:newItem()">
    <input type="text" id="newItem" name="newItem" placeholder="New item">

</form>
<ul id="ul">

</ul>

Комментарии:

1. items является ли глобальная переменная?

2. Просто чтобы уточнить, я хочу, чтобы элементы в localStorage были перечислены при запуске без запуска функции newItem

3. я имею в виду, что он работает после запуска функции newItem, так что это не должно быть проблемой, Тахави

4. Сложно проверить без информации о том, как, когда этот JS включен в страницу. Можете ли вы предоставить и это тоже?

5. localStorage.getItem("localsave") может вернуться null , если сохраненные данные еще не существуют. Вы должны справиться с этим случаем.

Ответ №1:

ваш код сначала запускает код java script, а затем отображает HTML-элементы.

эта строка была выполнена первой, до того, как был отображен элемент управления с идентификатором «ul» , поэтому он уже извлек данные из хранилища, но не может просмотреть их в не отображенном «пользовательском интерфейсе».

 $("#ul").html(html);

итак, ваш код должен вызываться todo.js после рендеринга HTML-элементов подобным образом:

     <html>
    <body>

    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"></script>   
       <form method="post" action="javascript:newItem()">
        <input type="text" id="newItem" name="newItem" placeholder="New item">

    </form>
    <ul id="ul">

</ul>

    <script src="todo.js"></script>

    </body>

    </html>

Ответ №2:

Как упоминал @Jonas Wilms, вам нужно обработать нулевое значение из хранилища. Ваша функция get должна быть примерно такой, как показано ниже.

  get() {
    var temp = localStorage.getItem("localsave")
    if (temp) {
      items = JSON.parse(temp)
    }
    else {
      items = [];
    }
  }

Ответ №3:

Я думаю, это то, что вы хотите.

 list();

function Todo(name){
    this.name = name;
    this.completed = false;
}

function newItem(){
    var items = get();
    var t = new Todo(document.getElementById("newItem").value)
    items.push(t);
    save(items);
    console.log('saving items', items);
}

function save(items){
    var save = JSON.stringify(items)
    localStorage.setItem("localsave", save)
    list();
}

function list(name){
    var html = "";
    var items = get();
    if(items.length > 0){
     for(var i in items){
      var todo = items[i];
      var name = todo.name;
      var completed = todo.completed;
      html  = "<li>" name "" completed "</li>"
     }
     $("#ul").html(html);
    }
    console.log('listing items', items);
}

function get(){
    var temp = localStorage.getItem("localsave");
    if(temp){
      return JSON.parse(temp);
    }else{
      return [];
    }
}