时间戳

首页 > 解决方案 > for循环不会在javascript启动时运行

javascript - for循环不会在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>

标签： javascript

解决方案

您的代码首先运行 java 脚本代码，然后呈现 HTMl 元素。

在呈现具有“ul”id 的控件之前，该行首先执行，因此它已经从存储中获取数据，但无法在未呈现的“ui”中查看它们。

$("#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>

推荐阅读