我試圖做一個todolist，但它不起作用

-6

我剛開始學習JavaScript，我有一個任務來做todo列表。這裏是要求：我試圖做一個todolist，但它不起作用

待辦列表將包含我們想要做的任務。
最初列表將包含這些預定義的項目（參見下面的模型） a。註冊到全棧網絡課程 b。參加選擇日 c。去看看X-Men啓示錄電影
當一個任務完成時，它將通過顯示帶有刪除線字體和灰色的任務文本進行標記 - 使用合適的CSS類。 a。列表中的項目（b）應顯示爲完成。
用戶可以通過在輸入框中輸入文本來添加一個新項目，允許一行文本的長度在6到42個字符之間，然後按下「添加」按鈕。
新項目將被添加到列表的頂部。
使用純JavaScript - 無框架。

***我已經完成了所有這些事情，但它不起作用。除非在html框中手動執行操作，否則我不能標記任何已完成的任務。這是迄今爲止代碼：

[https://jsfiddle.net/amir_nazarov/0tf5gwky/24/][1]

對不起，我的英語水平，並感謝大家的幫助。

來源

2017-05-07 amir nazarov

請將您的代碼包含在Stack Overflow的帖子中，請不要鏈接到jsfiddle。堆棧溢出和jsfiddle彼此不存在關聯，如果您的小提琴或jsfiddle由於某種原因發生故障或與此帖子無關聯，那麼將來登陸此帖子的用戶將無法引用您的原始代碼。這是很容易添加到SO，因爲它是jsfiddle，順便說一句。 –

這是否像你期望的那樣工作？https://jsfiddle.net/0tf5gwky/25/ –

對不起Bracking規則或我在帖子中做過的事情，我是新手，也是在網站上。是的它是完美的！但爲什麼它不適合我所寫的內容？ –

的問題是，在你的JavaScript，（即設置了刪除線能力之一）開頭的代碼不會被調用。

爲了解決這個問題，你必須：

將是代碼function裏面，像後它的代碼，並
添加一個function到body的onclick屬性，使它在頁面加載時被調用。

請參閱this JSFiddle。我認爲它實現了你以後的樣子。

來源

2017-05-07 23:11:30 skunkmb

現在，謝謝你，我明白我的錯誤。 –

當您嘗試將點擊事件綁定到已存在的ol li元素時，它們還沒有準備好。等待要加載的內容附加事件偵聽器。您還應該將偵聽器附加到使用添加按鈕創建的新元素li。

document.addEventListener("DOMContentLoaded", function(event) { 
 
    \t var task = document.querySelectorAll('ol li'); 
 
    /* go loop all the way- on tasks */ 
 
\t for (var i = 0; i < task.length; i++) { 
 
    \t 
 
\t \t task[i].addEventListener('click', function(event) { 
 
    \t \t \t event.target.classList.toggle("checked"); 
 
\t \t }, false); 
 
\t } 
 
}); 
 

 

 

 

 

 
function todoList(){ 
 
document.getElementById("todoInput").value 
 
var item = document.getElementById('todoInput').value 
 
if(item.length >= 6 && item.length <= 42) 
 
{ 
 
var text = document.createTextNode(item) 
 
var newItem = document.createElement('li') 
 
\t newItem.appendChild(text) 
 
    
 
    newItem.addEventListener('click', function(event) { 
 
    \t \t \t event.target.classList.toggle("checked"); 
 
\t \t }, false); 
 
\t document.getElementById('todoList').appendChild(newItem) 
 
var list = document.getElementById("todoList"); 
 
list.insertBefore(newItem, list.childNodes[0]); 
 
} 
 
else 
 
{ 
 
alert("The text is in the worng length") 
 
} 
 
}

ol { 
 

 
} 
 
ol li { 
 
    cursor: pointer; 
 
    position: relative; 
 

 
} 
 
ol li:hover { 
 
    background: #ddd; 
 
    color: black; 
 
} 
 
ol li.checked { 
 
    background: #888; 
 
    color: #fff; 
 
    text-decoration: line-through; 
 
} 
 
.checked { 
 
    background: #888; 
 
    color: #fff; 
 
    text-decoration: line-through; 
 
} 
 
ol li.checked::before { 
 
    position: absolute; 
 
    border-color: #fff; 
 
    border-style: solid; 
 

 
}

<!DOCTYPE html> 
 
<body> 
 
     <title>To Do List</title> 
 
     <h1>To Do List</h1> 
 
      <form id="todoForm"> 
 
      <input type="text" placeholder="Add a task here" id="todoInput"> 
 
    <button type="button" onclick="todoList()">Add</button> 
 
      </form> 
 
      <hr> 
 
      <ol id="todoList"> 
 
       <li>Register to Full Stack Web Course</li> 
 
       <li class="checked">Attend Selection Day</li> 
 
       <li>Go see X-Men apocalypse movie</li> 
 
      </ol> 
 
     <script src="js/main.js"></script> 
 
     </body>

來源

2017-05-07 23:04:32 jmtalarn

非常感謝你！ –

我試圖做一個todolist，但它不起作用

回答

相關問題