How to take text value and add it to list by clicking submit button using DOM?-CodePudding

my first question ever here!

I am trying to make a todo list, where each todo is represented as an li. I have a text input field and a submit button, but can't figure out how to grab the text value from the input field and add it to the list.

Here is what I have so far, I am sure it's completely bogus, as I am just starting out:

const submitButton = document.getElementById('submitButton');
let toDoText = document.getElementById('toDoText').value;

function addToDo() {
  submitButton.addEventListener('click', function() {
    let Li = document.getElementsByClassName('todo');
    let toDoText = document.getElementById('toDoText').value;
    for (let i = 0; i < Li.length; i  ) {
      form.push(toDoText);
    }
  })
}

<h1>TO-DO List</h1>
<form id="form">
  <input type="text" placeholder="Write your todo" id="toDoText">
  <input type="submit" id="submitButton">
</form>


<li class="todo">Example 1</li>
<li class="todo">Example 2</li>

CodePudding user response：

Give your <li> elements a parent element, such that

<ul id="toDo">
      <li class="todo">Example 1</li>
      <li class="todo">Example 2</li>
 </ul>

Then onclick, create a new li, populate it with the input value, and append it to the parent.

submitButton.addEventListener('click', function () {
            let newLi = document.createElement("li");
            li.innerText = document.getElementById('toDoText').value;
            document.getElementById("toDo").appendChild(newLi);
        });

CodePudding user response：

My recommendation is to use createElement('li') and setting the text(value) of the created element using createTextNode(input.value). Finally you have the insert the todo item, so we use insertBefore(newElm, currentElm).

const submitButton = document.getElementById('submitButton');

function addToDo() {

  // We select a container so we can insert our todo items in it
  let container = document.querySelector('div');
  
  // We get the value from the input
  let input = document.querySelector('#toDoText').value;
  
  // We create an element for each gotten input value
  const todo = document.createElement("li");
  
  // We set the text(value) of the todo item(li)
  const txt = document.createTextNode(input);
  
  // We append the text(value) to do created element(li)
  todo.appendChild(txt);
  
  // Finally we insert the last result(todo with value) inside the container(div)
  document.body.insertBefore(todo, container);
};

// We run the function
submitButton.addEventListener('click', addToDo);

// We prevent the form submit so we don't get any errors or blank page
document.querySelector("form").addEventListener('submit', e => e.preventDefault());

<form id="form">
  <input type="text" placeholder="Write your todo" id="toDoText">
  <input type="submit" id="submitButton">
</form>


<div>
</div>

CodePudding user response：

I've changed a bit your code by adding the explanation.

First of all as you have only the submit button you could use the submit event listener on the form it's self.

then prevent the page to be reloaded when the submit button is pressed with .preventDefault() you can read more about it here.

to get the value from the form we will use name instead the id it's almost the same code you've used but instead you can use todoForm.elements[FIELDNAME]

While for creating the new elements inside the list you can use string literal where by using closing the string between `` you can pass variables to it by closing then in ${VARIABLE}

With .innerHTML = we are going to append that string as HTML as last element.

const todoForm = document.forms["todoForm"]; // getting form DOM via it's name

todoForm.addEventListener('submit', addToDo); // adding submit listener to the form

function addToDo(evt) {
  evt.preventDefault(); // preventing the page to be reloaded after submit
  const list = document.getElementById('todoList');
  let toDoText = todoForm.elements["todoText"].value // getting value from input with todoText name
  
  list.innerHTML  = `<li >${toDoText}</li>` // appending li element to todoList by using string literal
  todoForm.reset(); // resetting the form to the user can add new data.
}

<h1>TO-DO List</h1>
<form name="todoForm">
  <input type="text" placeholder="Write your todo" name="todoText">
  <input type="submit">
</form>

<ul id="todoList">
  <li class="todo">Example 1</li>
  <li class="todo">Example 2</li>
</ul>

CodePudding user response：

i usually use new FormData() to take input data. Like this:

const form = document.getElementById("form");
const todos = document.getElementById("todos");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData(e.target)
  const todo = document.createElement("li");
  todo.innerText = formData.get("todo");
  todo.setAttribute("class", "todo");
  todos.appendChild(todo);
  form.reset();
})

<form id="form">
  <input type="text" name="todo" placeholder="Write your todo" id="toDoText">
  <button type="submit">Submit</button>
</form>

<ol id="todos">
  <li class="todo">Example 1</li>
  <li class="todo">Example 2</li>
</ol>