li element keeps disappearing when created using javascript

Question

I'm trying to create a todo app using JavaScript. It creates the li element with the input but it disappears after a second. Can someone tell me what's wrong with my code?

let ul = document.getElementById("ul"); //get the main list. capture ul element
let addBtn = document.getElementById("add-btn"); //button
let todoInput = document.getElementById("todo-input"); //targets the input

addBtn.addEventListener("click", function() {
  let list = document.createElement("li");
  list.innerHTML = todoInput.value;
  ul.appendChild(list);
});

<form>
  <h2>Input todo</h2>
  <input type="text" class="todo" id="todo-input" placeholder="Type your task to add" />
  <button class="btn" id="add-btn" type="submit">Add</button>
</form>
<div class="todo-container">
  <h2>Things to do:</h3>
    <ul id="ul">
    </ul>
</div>
</div>

if this is in a form - then the page is being submitted – Daniel A. White Sep 27 '22 at 13:42 — Daniel A. White, Sep 27 '22 at 13:42

score 0 · Accepted Answer · answered Sep 27 '22 at 13:44

Do it this way

addBtn.addEventListener("click", function(e) {
  e.preventDefault(); // prevent the default behavior (refresh)
  let list = document.createElement("li");
  list.innerHTML = todoInput.value;
  ul.appendChild(list);
});

The page is being submitted, you need to prevent that submit so that the page doesn't refresh.

li element keeps disappearing when created using javascript

1 Answers1