for循環不會在啟動javascript時運行
[英]for loop wont run on startup of 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>
3 個解決方案
解決方案1
0 已采納 2019-03-24 11:19:57
您的代碼首先運行java腳本代碼然后呈現HTMl元素。
在執行帶有“ul”id的控件之前，已經先執行了這一行，因此它已經從存儲中獲取了數據，但是在未呈現的“ui”中無法查看它們。
$("#ul").html(html);
所以你的代碼應該在渲染HTML元素之后調用todo.js ：
<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
0 2019-03-24 11:23:10
正如@Jonas Wilms所提到的，你需要處理來自商店的空值。 你的get函數需要如下所示。
get() {
var temp = localStorage.getItem("localsave")
if (temp) {
items = JSON.parse(temp)
}
else {
items = [];
}
}
解決方案3
0 2019-03-24 11:42:35
我想這就是你想要的。
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 [];
}
}
For 循環無法正常運行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.