I'm trying to clear my input field in my simplified to-do list but I can't get my code to clear the input when I add a new task.
If you look in the JS code you can see a simple code (input.value = "";) to clear the input but it doesn't work. Also the IF function that is supposed to have an alert message if you don't put any text in the input field doesn't work for some reason either.
I don't really understand how I can get them to work, I've been looking on W3 but can't find any good answers.
<h2>To-do list!</h2>
<div>
<input type="text" id="task" placeholder="Write task" />
<button id="my-button">Add task</button>
</div>
<ul id="list"></ul>
var btn = document.getElementById('my-button').onclick = function() {
var ul = document.getElementById("list");
var li = document.createElement("li");
var input = document.getElementById('task').value;
if (input != '') {
addItem();
}
function createDeleteButton() {
var deleteButton = document.createElement('button');
deleteButton.classList.add("deleteButton");
deleteButton.textContent = "x";
deleteButton.addEventListener("click", removeItem);
return deleteButton;
}
function addItem() {
let listElement = document.createElement('li');
listElement.innerText = input;
listElement.appendChild(createDeleteButton());
if (input.value != "") {
list.appendChild(listElement)
} else
alert("Please write something");
input.value = "";
}
function removeItem() {
let parent = this.parentNode.parentNode;
let child = this.parentNode;
parent.removeChild(child);
}
}
There are some problems with your code. You are wrapping all the functions inside add button onClick function. No need to do that, it make things complicated.
You are first checking if input is empty, so when addItem function executes, the inner if else will never be executed:
} else alert("Please write something");
How to do it?
1 Declare the elements you want to use:
const ul = document.getElementById("list");
const input = document.getElementById("task");
const addBtn = document.getElementById("my-button");
2 Make your add button's onClick function to do only what it have to do: add an item.
addBtn.onclick = addItem;
3 Declare the addItem function:
function addItem() {
if (input.value !== "") {
const listElement = document.createElement("li");
listElement.innerText = input.value;
listElement.appendChild(createDeleteButton());
ul.appendChild(listElement);
input.value = "";
} else {
alert("Please write something");
}
}
The addItem function first checks if input value is empty, and if it is not empty, do everything in the block. Else execute the else block (alert).
Note that at the end of the if block we set input's value to empty with : input.value = "";
I don't change them because they work. Just have them all outside of addItem function and use const instead of var (scope reasons).
function createDeleteButton() {
const deleteButton = document.createElement("button");
deleteButton.classList.add("deleteButton");
deleteButton.textContent = "x";
deleteButton.addEventListener("click", removeItem);
return deleteButton;
}
function removeItem() {
const parent = this.parentNode.parentNode;
const child = this.parentNode;
parent.removeChild(child);
}
======================
const ul = document.getElementById("list");
const input = document.getElementById("task");
const addBtn = document.getElementById("my-button");
addBtn.onclick = addItem;
function addItem() {
if (input.value !== "") {
const listElement = document.createElement("li");
listElement.innerText = input.value;
listElement.appendChild(createDeleteButton());
ul.appendChild(listElement);
input.value = "";
} else {
alert("Please write something");
}
}
function createDeleteButton() {
const deleteButton = document.createElement("button");
deleteButton.classList.add("deleteButton");
deleteButton.textContent = "x";
deleteButton.addEventListener("click", removeItem);
return deleteButton;
}
function removeItem() {
const parent = this.parentNode.parentNode;
const child = this.parentNode;
parent.removeChild(child);
}
var input is defined as task.value. You need to get task and then change task.value
function todolist(){
var btn = document.getElementById('my-button').onclick = function() {
var ul = document.getElementById("list");
var li = document.createElement("li");
var input = document.getElementById('task').value;
if (input != '') {
addItem();
}
function createDeleteButton() {
var deleteButton = document.createElement('button');
deleteButton.classList.add("deleteButton");
deleteButton.textContent = "x";
deleteButton.addEventListener("click", removeItem);
return deleteButton;
}
function addItem() {
let listElement = document.createElement('li');
listElement.innerText = input;
listElement.appendChild(createDeleteButton());
if (input != "") {
list.appendChild(listElement)
} else alert("Please write something");
var task = document.getElementById('task')
console.log(task)
task.value = ""
input = "";
}
function removeItem() {
let parent = this.parentNode.parentNode;
let child = this.parentNode;
parent.removeChild(child);
}
}
}
todolist();<h2>To-do list!</h2>
<div>
<input type="text" id="task" placeholder="Write task" />
<button id="my-button">Add task</button>
</div>
<ul id="list"></ul>Instead of input.value = "" use input = ""