2017-03-15 55 views
0

我試圖做一個與js做它的第一個項目與語言列表。Java腳本做的清單

\t var row = 0; 
 

 
function addItem() { 
 
    var Items = getList(); 
 
    var item = document.getElementById("todoInput").value; 
 
    var text = document.createTextNode(item); 
 
    var newItem = document.createElement("li"); 
 
    newItem.appendChild(text); 
 
    newItem.setAttribute('id', 'todoItem'+row) 
 
    document.getElementById("todoList").appendChild(newItem); 
 
    Items.push(item); 
 
    localStorage.setItem('todo', JSON.stringify(Items)); 
 

 
    var removeItem = document.createElement('input') 
 
    removeItem.setAttribute('type', 'button'); 
 
    removeItem.setAttribute('value', 'remove'); 
 
    removeItem.setAttribute('id', 'removeButton'); 
 
    removeItem.setAttribute('onclick', 'deleterow(' + row + ')'); 
 

 
    newItem.appendChild(removeItem); 
 
\t row++; 
 

 
} 
 

 
function getList() { 
 
    var Items = new Array; 
 
    var ItemsStr = localStorage.getItem('todo'); 
 
    if (ItemsStr != null) { 
 
    Items = JSON.parse(ItemsStr); 
 
    } 
 
    return Items; 
 
} 
 
var Items = getList(); 
 
for (tdl of Items) { 
 
    console.log(tdl) 
 
    var text = document.createTextNode(Items); 
 
    var newItem = document.createElement("li"); 
 
    newItem.appendChild(text); 
 
    document.getElementById("todoList").appendChild(newItem); 
 
} 
 

 
function deleterow(ID) { 
 
    document.getElementById('todoItem'+ID).remove() 
 
} 
 

 
function removeAll() { 
 
\t document.getElementById('todoList').innerHTML = ''; 
 
}
<!DOCTYPE html> 
 
<title>To do list</title> 
 

 
<body manifest="todo.appcache"> 
 
    <h1>To do list</h1> 
 
    <form> 
 
    <input type="text" id="todoInput"> 
 
    <button type="button" onclick="addItem()">Add</button> 
 
    </form> 
 
    <ol id="todoList"> 
 
    </ol> 
 

 
    <script src="todo.js"> 
 

 

 
    </script> 
 
</body>

有代碼。當頁面刷新時,我需要阻止它重複整個數組,而是按照輸入時的順序顯示數組,我需要弄清楚如何修復remove all和remove按鈕。刪除按鈕從可見列表中刪除項目,但不從數組中刪除項目。網頁託管在這裏:

+0

運行您的代碼片段會拋出一個錯誤,指出「」消息「:」未捕獲SecurityError:未能從'窗口'讀取'localStorage'屬性:文檔是沙盒一個nd缺少'allow-same-origin'標誌。「' – Pat

回答

0

我不知道你在想什麼,但約在這裏:

for (tdl of Items) { 
    console.log(tdl) 
    var text = document.createTextNode(Items); 
    var newItem = document.createElement("li"); 
    newItem.appendChild(text); 
    document.getElementById("todoList").appendChild(newItem); 
} 

創建文本節點與Items - (整個列表)

嘗試,而不是創建它與tdl - (當前迭代的項目)

+0

我剛纔發送了你的答案之前,但現在我的問題是代碼不會從數組中刪除項目時刪除所以一旦你重新加載它回來。我會做什麼來阻止這一點。我用刪除...(我忘了其餘的),它只是拋出了一千個錯誤,並打破了一切。所以即時通訊不知道什麼工作 –

+0

還刪除所有按鈕仍然無法正常工作 –