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>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);
});
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>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 class="todo">${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>