输入框中的值未显示
[英]Value from Input box not showing
问题描述
So I am trying to create a simple to-do application.
所以我正在尝试创建一个简单的待办事项应用程序。 The list itself works perfectly fine and things get added how they should.该列表本身工作得很好，并且添加了它们应该如何添加的内容。
However, now I am trying to have a sort of timeline that basically shows the todo items in a different style.但是，现在我正在尝试建立一种时间表，基本上以不同的风格显示待办事项。
Now the issue is every time an item gets added, it shows up in the regular checklist but not in the new timeline.现在的问题是每次添加项目时，它都会显示在常规清单中，但不会出现在新的时间线中。 The LI gets created but with no content inside of it. LI 已创建，但其中没有内容。
Any of you guys know how I can display the input value from the input box into the timeline as I did with the regular checklist?你们中的任何人都知道如何像处理常规清单一样将输入框中的输入值显示到时间线中吗？
let inputValue = document.getElementById("inputValue"); let addButton = document.getElementById("addButton"); let frm = document.querySelector("form"); //Prevent Refresh function handleForm(event) { event.preventDefault(); } function addItem() { // Check Input for empty value if (inputValue.value.length == 0) { alert("Your Input was empty"); return; } //Create LI and append to UL let listItem = document.createElement("li"); listItem.innerText = inputValue.value; let ul = document.getElementById("list-ul") ul.appendChild(listItem); listItem.className = "list-item"; //Create Delet button and append to LI let deleteButton = document.createElement("button"); listItem.appendChild(deleteButton); deleteButton.className = "delete-button"; deleteButton.innerHTML = '<i class="far fa-trash-alt"></i>'; deleteButton.addEventListener("click", deleteItem); //Reset the Input frm.reset(); //Prevent refresh frm.addEventListener('submit', handleForm); //Delete Function function deleteItem(e) { console.log("Item deleted"); listItem.remove(); } //Timeline let timeline = document.getElementsByClassName("timeline"); let timeUl = document.getElementById("time-ul"); //Create LI for timeline let timelineItem = document.createElement("li"); timelineItem.innerText = inputValue.value; timeUl.appendChild(timelineItem); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/e7a951e13e.js" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet"> <title>Document</title> </head> <body> <main> <div class="container"> <h1>To Do</h1> <form> <input type="text" id="inputValue"> <button type="button" id="addButton" onclick="addItem();">Add Item</button> <!-- <button type="button" id="clearAll" onclick="clearAll();">Clear All</button> --> </form> <div id="list-container"> <ul id="list-ul"> </ul> </div> <div class="timeline"> <ul id="time-ul"> </ul> </div> </div> </main> <script src="index.js"></script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2020-10-14 12:33:41
You are reseting the form and later trying to access the value from the input, which was cleared.您正在重置表单，稍后尝试从已清除的输入访问值。
Move frm.reset();移动frm.reset(); to after the Timeline is updated.到时间线更新后。
...
//Timeline
let timeline = document.getElementsByClassName("timeline");
let timeUl = document.getElementById("time-ul");
//Create LI for timeline
let timelineItem = document.createElement("li");
timelineItem.innerText = inputValue.value;
timeUl.appendChild(timelineItem);
//Reset the Input
frm.reset();
Another option you have is to store the input value in a variable and use it in your calls before resetting the form.您拥有的另一个选择是将输入值存储在一个变量中，并在重置表单之前在您的调用中使用它。
const todoValue = inputValue.value;
...
//Timeline
timelineItem.innerText = todoValue;
解决方案2
0 2020-10-14 12:30:51
好吧，我只是瞎了，忘记了我通过重置表单来清除输入。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.