輸入框中的值未顯示
[英]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.