New coder here. I am trying to create a simple to-do list but clicking on the submit button is not returning any input.
Can you help me fix this? My code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>To-Do List</title>
<meta charset=""utf-8>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<style>
#interface {
background-color: rgb(220, 216, 216);
}
</style>
</head>
<body class="container" id="interface">
<h1>To-Do List</h1>
<h2>By Thabo Mtetwa</h2>
<h4 id= "description">From office tasks, to household chores, and personal memos - this to-do list is a great way to keep track of them all.</h4>
<div class="container">
<h3>Item</h3>
<input type="text" id="item-input" placeholder="Add item here">
<br><br>
<div button type="button" class="btn btn-primary" id="submit">Submit</button>
</div>
<div id="todo-container">
</div>
</div>
<script>
let inputField = document.getElementById("item-input");
let addButton = document.getElementById("submit");
let listArea = document.getElementById("todo-container");
addButton.addEventListener("click", function() {
var listItems = document.createElement("li");
ListItems.innerText = listArea.value;
listArea.appendChild(ListItems);
});
</script>
</body>
</html>
I created a variable to capture the information submitted in the input field, and set it to present this information in the list area below the input field. But this has not worked.
You have an error in casing for the listItems variable. You should change it everywhere to start from the lowercase letter.
Also, you should use inputField.value for TODO item values.
Below there is an improved event handler
addButton.addEventListener("click", function() {
var listItems = document.createElement("li");
listItems.innerText = inputField.value;
listArea.appendChild(listItems);
});
See jsfiddle for an example of the working code.
after months of doing courses, I finally ventured into coding my first project, but the most basic functionality of it isn't working.
I'm doing a simple to do list, and im working on it actually displaying the elements added by the user through the button but they don't appear on the screen after clicking, even if i'm using DOM manipulation commands to create an 'ul' element. Also, the page refreshes after every click on the button.
let addToButton = document.getElementById('addButton');
let inputFieldset = document.getElementById('toDoInput');
let toDoContainer = document.getElementById('toDoList');
addToButton.addEventListener('click', function(){
let toDoStuff = document.createElement('ul')
toDoStuff = inputFieldset.value
toDoContainer.append(toDoStuff);
})
<!DOCTYPE html>
<html lang="en">
<head>
<title>la lista</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="list-style.css"/>
</head>
<body>
<main>
<h1>Ysmael's To-Do List</h1>
<h3>Input your activities</h3>
<form>
Input something<input type="text" required id="toDoInput" placeholder="Input your stuff"/><button id="addButton" type="submit">+</button>
</form>
<div id="toDoList">
</div>
</main>
<script href="todolist.js"></script>
</body>
</html>
Acording to my logic, it should work, but I'm clearly doing one or more things wrong.
to not submit the form, replace the <button> with <input type="button" value="+"> and to create list you want <li> element with the parent <ul>
let addToButton = document.getElementById('addButton');
let inputFieldset = document.getElementById('toDoInput');
let toDoContainer = document.getElementById('toDoList');
addToButton.addEventListener('click', function() {
// show warning if input empty
if (!inputFieldset.reportValidity()) // or use: if (!inputFieldset.value)
return
let toDoStuff = document.createElement('li')
toDoStuff.innerHTML = inputFieldset.value
toDoContainer.append(toDoStuff);
// reset input
inputFieldset.value = '';
})
<h3>Input your activities</h3>
<form>
Input something <input type="text" required id="toDoInput" placeholder="Input your stuff" />
<button id="addButton">+</button>
</form>
<ul id="toDoList">
</ul>
For problem #1:
In line 6 you are creating the let binding toDoStuff which holds a <ul>-element, just to override toDoStuff in line 7 with the current value of the <input>-element. Even if it worked (somehow), I suspect it wouldn't work as you expect, because it would create a completely new list for each todo instead of creating a single list of todos. If I'm right, move the let toDoStuff = document.createElement('ul') line out of your event handler function, create the <ul> right away and .append() it to your toDoContainer (hold a reference to it so that you can append elements to it later).
let toDoContainer = document.getElementById('toDoList');
let toDoStuff = document.createElement('ul');
toDoContainer.append(toDoStuff);
Then, inside the click handler function, create an <li> element that you can append to the <ul>:
addToButton.addEventListener('click', function () {
let toDoListItem = document.createElement('li');
// ... elided
});
The .append() method of an HTMLElement expects to receive another HTMLElement or Node, but you are passing it a String. This means you need to transform that String into a Node before passing it to .append(), and the usual way to do that transformation is via document.createTextNode().
let toDoText = document.createTextNode(inputFieldset.value)
However, you want to insert that Node into a <ul> element and the only child elements of an unordered list should be <li>-elements. This is why we generated the <li> in the previous sections, so all you have to do now is adding the Node to the <li>, then adding the <li> to the <ul>. In code:
addToButton.addEventListener('click', function () {
let toDoListItem = document.createElement('li');
let toDoText = document.createTextNode(inputFieldset.value);
toDoListItem.append(toDoText);
toDoStuff.append(toDoListItem);
});
In regards to the #2 submission problem:
Your button is nested inside a <form> element, so pressing it "naturally" submits the form. What you want to do is to suppress the submission, either via:
calling .preventDefault() on the generated SubmitEvent object of the form
returning false in your event handler function
In favor of a standards way, use .preventDefault(), so we need a reference to the <form> element instead of the <button> as well as changing the event type from 'click' to 'submit':
// ... elided
let addToButton = document.querySelector('form');
// ... elided
addToButton.addEventListener('submit', function (event) { // <-- changed click to submit, added generated event object
event.preventDefault(); // <-- suppress form submission
let toDoListItem = document.createElement('li');
// ... elided, see above
});
Changing the variable names to appropriate ones is left as an excercise ;-)
Example:
let addToButton = document.querySelector('form');
let inputFieldset = document.getElementById('toDoInput');
let toDoContainer = document.getElementById('toDoList');
let toDoStuff = document.createElement('ul');
toDoContainer.append(toDoStuff);
addToButton.addEventListener('submit', function (event) {
event.preventDefault();
let toDoListItem = document.createElement('li');
let toDoText = document.createTextNode(inputFieldset.value);
toDoListItem.append(toDoText);
toDoStuff.append(toDoListItem);
})
<!DOCTYPE html>
<html lang="en">
<head>
<title>la lista</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="list-style.css"/>
</head>
<body>
<main>
<h1>Ysmael's To-Do List</h1>
<h3>Input your activities</h3>
<form>
Input something<input type="text" required id="toDoInput" placeholder="Input your stuff"/><button id="addButton" type="submit">+</button>
</form>
<div id="toDoList">
</div>
</main>
<script href="todolist.js"></script>
</body>
</html>
One of the solutions to prevent reloading the page after submitting the form is to use even.preventDefault() on submit event. In this way you prevent default browser's behavior. Anyway, to do so, you should add submit event listener. You can also add submitted task to the list from there, therefore I replaced your 'click' event handler with submit.
<script> tag shouldn't have href attribute. It should be src instead.
You are creating <ul> element which is a container for the list of unordered elements. You should create <li> element and append it to <ul> or <ol> container. I have replaced tasks container from <div> to <ul>.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>la lista</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="list-style.css" />
</head>
<body>
<main>
<h1>Ysmael's To-Do List</h1>
<h3>Input your activities</h3>
<form id="toDoForm">
Input something
<input type="text" required id="toDoInput" placeholder="Input your stuff" />
<button id="addButton" type="submit">+</button>
</form>
<ul id="toDoList">
</ul>
</main>
<script src="todolist.js"></script>
</body>
</html>
tasklist.js:
let inputFieldset = document.getElementById('toDoInput');
let toDoContainer = document.getElementById('toDoList');
let toDoForm = document.getElementById('toDoForm');
toDoForm.addEventListener('submit', (event) => {
event.preventDefault();
const task = document.createElement('li');
task.innerText = inputFieldset.value;
toDoContainer.appendChild(task);
inputFieldset.value = '';
})
Change button type to button instead of submit to keep everything from disappearing when it's clicked, and change toDoList element from div to ul and then add tasks as li [list items] rather than ul [a whole unordered list in itself]. Also, you need to change the innerHTML (or innerText) of toDoStuff instead of setting the element itself (so that it remains a li).
let addToButton = document.getElementById('addButton');
let inputFieldset = document.getElementById('toDoInput');
let toDoContainer = document.getElementById('toDoList');
addToButton.addEventListener('click', function(){
let toDoStuff = document.createElement('li');
toDoStuff.innerHTML = inputFieldset.value;
toDoContainer.append(toDoStuff);
inputFieldset.value = "";//clear field
})
//so that "enter" does the same as addToButton instead of submit
inputFieldset.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
addToButton.click();
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>la lista</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="list-style.css"/>
</head>
<body>
<main>
<h1>Ysmael's To-Do List</h1>
<h3>Input your activities</h3>
<form>
Input something<input type="text" required id="toDoInput" placeholder="Input your stuff"/><button id="addButton" type="button">+</button>
</form>
<ul id="toDoList">
</ul>
</main>
<script href="todolist.js"></script>
</body>
</html>
I've also added a line to clear the field [for the next task] after a task has been added, and another event listener to the text input because "enter" key can also register as submit - but now, instead of everything disappearing on enter, it simulates clicking the add button.
I changed your code. The problems are 3 in number.
you have button type submit, this submits the form and the form then requires an action to handle the submit, this is typically used to send data to other pages.(dont quote me on that, i never use it)
you made toDoStuff get the value of the input thus overriding the create element.
you had a div as a container for a created ul when you want to have a ul as container for a created li.
Here is the changed html:
<body>
<main>
<h1>Ysmael's To-Do List</h1>
<h3>Input your activities</h3>
<form>
Input something<input type="text" required id="toDoInput" placeholder="Input your stuff"/><button id="addButton" type="button">+</button>
</form>
<ul id="toDoList">
</ul>
</main>
</body>
And here is the changed Javascript:
let addToButton = document.getElementById('addButton')
let inputFieldset = document.getElementById('toDoInput')
let toDoContainer = document.getElementById('toDoList')
addToButton.addEventListener('click', () => {
let toDoStuff = document.createElement('li')
toDoStuff.innerHTML = inputFieldset.value
toDoContainer.append(toDoStuff)
})
Good luck and happy coding, dont let a setback make you give up!
Bind the <form> to the "submit" event. Details are commented in example.
// Reference <form>
const todo = document.forms.todo;
// Reference <input>
const add = todo.elements.add;
// Reference <ul>
const list = document.querySelector(".list");
/**
* Bind <form> to "submit" event
* Stop <form> from sending data and blanking out the page
* Create <li> which is required in a <ul>
* Add the value of <input> as the text of <li>
* Add <li> to <ul>
* Clear the <form> to prevent accidental clicking
*/
todo.addEventListener('submit', function(event) {
event.preventDefault();
const item = document.createElement('li')
item.textContent = add.value
list.append(item);
this.reset();
});
<main>
<!-- Add #id or [name] to <form> -->
<form id="todo">
<fieldset>
<legend>Ysmael's To-Do List</legend>
<!-- Add <label> and [for="{<input> #id}"] -->
<label for="add">Enter Task: </label>
<input id="add" type="text" required>
<!-- A plain <button> inside a <form> will trigger "submit" -->
<button>+</button>
</fieldset>
</form>
<ul class="list"></ul>
</main>
I’m in a programming course and I need to create a “To-Do” list page using javascript and HTML. Whatever the user types in the text box should show up below a "To-Do List" heading lower on the page. I’m having trouble getting the information submitted in the form to show up on the page below the To Do list heading. Here’s my code so far.
const formE1 = document.getElementById('todo-form');
const inputE1 = document.getElementById('todo-item');
const list = document.getElementById('to-do');
formE1.addEventListener('submit', function(event) {
event.preventDefault();
const li = document.getElementById('the-list');
document.createElement('li');
inputE1.appendChild(li);
console.log(formE1)
})
const input = document.querySelector('ol');
let template = ''
for (let i = 0; i < inputE1.length; i++) {
const item = `
<li>
<p>Name: ${inputE1}</p>
</li>
`
template += item;
}
input.innerHTML = template;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
</head>
<body>
<h1>Add a Todo</h1>
<div id="todo-list">
<form id="todo-form">
<input type="text" id="todo-item" placeholder="List Item"/>
<input type="submit" id="todo-add" value="Submit"/>
</form>
<div id="to-do">
<h2>To-Do List</h2>
<ol id="the-list"></ol>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
The key thing is that you were trying to execute code outside of the handler.
You can simplify your code a little. There's no real need for a form element, for example, so add the listener to your button.
const button = document.querySelector('button');
const input = document.querySelector('input');
const list = document.querySelector('ol');
button.addEventListener('click', function(e) {
const li = document.createElement('li');
li.textContent = input.value;
list.appendChild(li);
});
<h1>Add a Todo</h1>
<div>
<input type="text" placeholder="List Item" />
<button type="button">Submit</button>
<div>
<h2>To-Do List</h2>
<ol></ol>
</div>
</div>
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>
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;
Alright, i was just blind and forgot that i cleared the input by resetting the form.
There are posts where this is mentioned but in J Query which i have not learned yet. I have been trying to add the item once the user click on screen or keyboard. When the user clicks on screen it seems to be working perfectly but then when the user presses enter on keyboard, the items shows up for less than a millisecond then disappears. Also, if you can kindly mention how can I add a remove function to remove an item the user click on.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Simple Shopping Cart</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<p class="buy">Buy your items anywhere and anytime</p>
<p class="click">click on an item to remove it</p>
<form>
<input type="text" class="item" placeholder="Item:">
<button type="button">Add item</button>
</form>
<br>
<ul>
</ul>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
and here is the JavaScript:
const input = document.querySelector(".item");
const btn = document.querySelector("button");
const ul = document.querySelector("ul");
function inputLength() {
return input.value.length;
}
function add() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
}
function addItem() {
if (inputLength() > 0) {
add();
}
}
function addItemPress(event) {
if (inputLength() > 0 && event.which === 13) {
add();
}
}
btn.addEventListener("click", addItem);
input.addEventListener("keypress", addItemPress)
By default, forms will reset the page when they are submitted, unless you set the action property to "#". To run JavaScript when a form is submitted, you can use the onSubmit property. These approaches can be combined like this:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Simple Shopping Cart</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<p class="buy">Buy your items anywhere and anytime</p>
<p class="click">click on an item to remove it</p>
<form id="addItemForm" action="#" onsubmit="add()">
<input type="text" class="item" placeholder="Item:">
<button type="submit">Add item</button>
</form>
<br>
<ul>
</ul>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js:
const input = document.querySelector(".item");
const btn = document.querySelector("button");
const ul = document.querySelector("ul");
const form = document.getElementById("addItemForm");
function add() {
if (input.value.length > 0) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
form.reset();
}
}