输入框中的值未显示
[英]Value from Input box not showing
问题描述
所以我正在尝试创建一个简单的待办事项应用程序。 该列表本身工作得很好，并且添加了它们应该如何添加的内容。
但是，现在我正在尝试建立一种时间表，基本上以不同的风格显示待办事项。
现在的问题是每次添加项目时，它都会显示在常规清单中，但不会出现在新的时间线中。 LI 已创建，但其中没有内容。
你们中的任何人都知道如何像处理常规清单一样将输入框中的输入值显示到时间线中吗？
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
您正在重置表单，稍后尝试从已清除的输入访问值。
移动frm.reset(); 到时间线更新后。
...
//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();
您拥有的另一个选择是将输入值存储在一个变量中，并在重置表单之前在您的调用中使用它。
const todoValue = inputValue.value;
...
//Timeline
timelineItem.innerText = todoValue;
解决方案2
0 2020-10-14 12:30:51
好吧，我只是瞎了，忘记了我通过重置表单来清除输入。
如何获取显示来自后端值的输入框的文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.