我似乎無法將項目推送到待辦事項列表中
[英]I cannot seem to push items to my to-do list
問題描述
成品應該在每個條目旁邊都有一個復選框，並具有編輯或刪除每個項目的選項。 我離那還很遙遠，因為我什至無法寄出物品。
另外，對格式感到抱歉，我沒有粘貼CSS，因為就我而言這不是問題。
HTML：
var list = document.getElementById('list'); //The unordered list. var entry = document.createElement("li"); //Whatever this is. I'm assuming a command saved into a variable (?). //var todolist = list.getElementsById('li'); // var btn = document.getElementById('ToDoButton'); // // btn.addEventListener("click", function(){ // todolist.appendChild('li'); // }); /* Upon submission of the item in the text field, the string is stored in inputValue and theText becomes a text node of inputValue, which is appended to the end of the variable entry. This means that there should be a new item added to the unordered list with the information found in the text field, but it doesn't show. Also, as far as I know, this is only if the Add button is clicked, and not upon pressing Enter while in the text box. */ function newElement() { var inputValue = document.getElementById("textBox").value; var theText = document.createTextNode(inputValue); entry.appendChild(theText); if (inputValue !== '') { document.getElementById(list).appendChild(entry); } }
<!DOCTYPE html> <html> <head> <title>To-Do List</title> <link rel="stylesheet" href="todo.css"> </head> <body> <div class="toDoList"> <h4>To-Do List</h4> <form target="_self"> <!-- This is so that the submitted information doesn't go anywhere but to the current page. --> <input type="text" name="toDoList" placeholder="To-Do" id="textBox"> <input type="submit" value="Add" onclick="newElement()" id="ToDoButton"> <!-- newElement() is a JS function that will add the information in the search bar to the unordered list below. --> </form> </div> <section id="main"> Tasks: <ul id="list"> <!-- These are dummy values for the unordered list. The idea is that the next item should be placed beneath them. --> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </section> <script type="text/javascript" src="todo.js"> </script> </body> </html>
3 個解決方案
解決方案1
0 2019-03-04 21:30:22
這是如何在頁面上動態添加元素的簡短示例。 用戶鍵入一個待辦事項，然后單擊按鈕。 當他們單擊按鈕時，我們從輸入框中獲取值，創建一個新的列表項元素，然后將其附加到dom。
function addItem() { var el = document.createElement('li') var val = document.getElementById('item-val').value; el.innerHTML = val; document.getElementById('list').append(el); }
<input id="item-val" type="text" /> <button onclick="addItem()">Add an item</button> <ul id="list"></ul>
解決方案2
0 2019-03-04 21:30:43
一些問題：
1）當您單擊按鈕時，它將提交表單。 這將導致頁面刷新，因此JavaScript所做的所有更改都會丟失，因為您是從服務器重新加載頁面的。 將其更改為<button type="button"意味着它不再引起回發。 老實說，如果您不打算將數據發送到服務器，則實際上根本不需要<form> 。
2）最好將list和entry變量放在函數內-盡可能避免使用全局變量，以減少意外范圍問題。 另外，您每次都需要創建一個新entry ，而不必繼續添加相同的entry 。
3） document.getElementById(list).appendChild(entry)不起作用，因為list已經是表示元素的對象-它不是包含ID的字符串。 所以list.appendChild()在這里是正確的-即，您可以直接在現有對象上調用appendChild（）函數。
4）（可選）您實際上不需要單獨的textNode對象-只需設置列表項的innerText屬性即可。
5）再次可選，但考慮了最佳實踐：我聲明了一個不引人注目的事件處理程序（使用addEventListener ），而不是將其內聯到HTML中。 通常認為這是為了使代碼更具可維護性和可追溯性，因為所有腳本都與HTML分開保存在一個位置。
這是固定版本：
document.querySelector("#ToDoButton").addEventListener("click", newElement); /* Upon submission of the item in the text field, the string is stored in inputValue and theText becomes a text node of inputValue, which is appended to the end of the variable entry.*/ function newElement() { var list = document.getElementById('list'); //The unordered list. var entry = document.createElement("li"); //a new list item var inputValue = document.getElementById("textBox").value; if (inputValue !== '') { entry.innerText = inputValue; list.appendChild(entry); } }
<!DOCTYPE html> <html> <head> <title>To-Do List</title> <link rel="stylesheet" href="todo.css"> </head> <body> <div class="toDoList"> <h4>To-Do List</h4> <form target="_self"> <input type="text" name="toDoList" placeholder="To-Do" id="textBox"> <button type="button" id="ToDoButton">Add</button> </form> </div> <section id="main"> Tasks: <ul id="list"> <!-- These are dummy values for the unordered list. The idea is that the next item should be placed beneath them. --> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </section> <script type="text/javascript" src="todo.js"> </script> </body> </html>
解決方案3
0 2019-03-04 21:38:59
您的主要問題是，當您期望帶有click事件偵聽器的<input type="button">的行為時，您正在使用<input type="submit">和<input type="submit"> ：
document.querySelector('#ToDoButton').addEventListener('click', newElement); function newElement() { var inputValue = document.getElementById("textBox").value; var theText = document.createTextNode(inputValue); var liEl = document.createElement('li'); liEl.appendChild(theText); if (inputValue !== '') { document.getElementById('list').appendChild(liEl); } }
<head> <title>To-Do List</title> <link rel="stylesheet" href="todo.css"> </head> <body> <div class="toDoList"> <h4>To-Do List</h4> <input type="text" name="toDoList" placeholder="To-Do" id="textBox"> <!--The input type needs to be "button, not "submit"--> <input type="button" value="Add" id="ToDoButton"> </div> <section id="main"> Tasks: <ul id="list"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </section> <script type="text/javascript" src="todo.js"> </script> </body>
在按下待辦事項列表項的取消按鈕時，它會刪除以下所有待辦事項列表項，這是我的待辦事項列表的代碼
[英]on pressing the cancel button of a todo list item, it removes all the below to-do list items, here is the code of my to-do list
如何使我的 Javascript 待辦事項列表中的任務出現在新列表項上？
[英]How can I make a task in my Javascript to-do list appear on a new list item?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.