Value from Input box not showing
Question
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.
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 answers
solution1
1 ACCPTED 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(); 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;
solution2
0 2020-10-14 12:30:51
好吧，我只是瞎了，忘记了我通过重置表单来清除输入。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.