I am trying to add the elements of a list called "taskList" made up of values I get from the input elements.
Can anyone please help me, I don't understand why the elements from the list are not showing.
var taskList = [];
var input = document.getElementById('takeInput');
var button = document.getElementById('addInput');
button.onclick = function(){
var nHTML = '';
var userEnteredText = input.value;
taskList.push(userEnteredText);
taskList.forEach(function(task){
nHTML += '<li>'+task+'</li>';
});
document.getElementsByClassName('taskLists').innerHTML = '<ul>' + nHTML + '</ul>';
}
<div class="wrapper">
<header>To-Do List</header>
<div class="taskAdder">
<input id="takeInput" type="text" placeholder="Add your new To-Do">
<button id="addInput" class="button" type="button" >➕</button>
</div>
<div class="taskLists">
</div>
<div class="footer">
<span> You have <span class="pendingTasks"></span> tasks left </span>
<button type="button" class="button">Clear All</button>
</div>
</div>
I tried checking several times but nothing is updating in the HTML document
You shouldn't append to innerHTML, instead, use createElement to make the li, then set innerHTML of that new element to input.value and use appendChild to append it to the list
var input = document.getElementById('takeInput');
var button = document.getElementById('addInput');
var tlist = document.getElementsByClassName('taskLists')[0];
button.onclick = function(){
let e = document.createElement('li');
e.innerHTML = input.value
tlist.appendChild(e)
// Optionally, clear the input field to prevent double adding the same task
input.value = '';
}
<div class="wrapper">
<header>To-Do List</header>
<div class="taskAdder">
<input id="takeInput" type="text" placeholder="Add your new To-Do">
<button id="addInput" class="button" type="button" >➕</button>
</div>
<div class="taskLists">
</div>
<div class="footer">
<span> You have <span class="pendingTasks"></span> tasks left </span>
<button type="button" class="button">Clear All</button>
</div>
</div>
The main mistake was using .getElementsByClassName like it was one element only and not a list (don't ignore the s in elements!).
Anyway I slightly refactored your code to have better strategies for each of its goals and implemented also the logic for clearing the tasks list.
var taskList = [];
var input = document.getElementById('takeInput');
var buttonAdd = document.getElementById('addInput');
var buttonClear = document.getElementById('clearInput');
var tasksList = document.getElementById('tasksList');
buttonAdd.addEventListener('click', (event)=>{
addTask(input.value);
});
buttonClear.addEventListener('click', (event)=>{
tasksList = [];
document.querySelector('#tasksList ul').remove();
});
function addTask(value){
if(taskList.length == 0){
document.getElementById('tasksList').append( document.createElement('ul') );
}
taskList.push(value);
const newLI = document.createElement('li');
newLI.innerText = value;
document.querySelector('#tasksList ul').append(newLI);
}
<body>
<div class="wrapper">
<header>To-Do List</header>
<div class="taskAdder">
<input id="takeInput" type="text" placeholder="Add your new To-Do">
<button id="addInput" class="button" type="button">➕</button>
</div>
<div id="tasksList">
</div>
<div class="footer">
<span> You have <span class="pendingTasks"></span> tasks left </span>
<button id="clearInput" type="button" class="button">Clear All</button>
</div>
</div>
</body>
you just needed to use an ID on the tasklist.
getElementsByClassName needs an index, making your question a dupe of What do querySelectorAll and getElementsBy* methods return?:
document.getElementsByClassName('taskLists')[0].innerHTML
That said, here is a full version using recommended eventListener and IDs where relevant.
let tasks = [];
const taskList = document.getElementById('taskLists')
const input = document.getElementById('takeInput');
const add = document.getElementById('addInput');
const pendingTasks = document.getElementById('pendingTasks');
const clear = document.getElementById('clear');
const showTasks = () => {
taskList.innerHTML = `<ul>${tasks.map(task => `<li>${task}</li>`).join('')}</ul>`;
pendingTasks.textContent = `${tasks.length} task${tasks.length != 1 ? "s" : ""}`;
};
add.addEventListener('click', () => {
var userEnteredText = input.value;
tasks.push(userEnteredText);
showTasks();
});
clear.addEventListener('click', () => {
tasks = [];
showTasks();
});
taskList.addEventListener('click', (e) => {
const tgt = e.target.closest('li');
if (!tgt) return; // not a task
const task = tgt.textContent;
tgt.remove()
tasks = tasks.filter(currentTask => currentTask != task); // remove from list
showTasks()
});
showTasks(); //init
<div class="wrapper">
<header>To-Do List</header>
<div class="taskAdder">
<input id="takeInput" type="text" placeholder="Add your new To-Do">
<button id="addInput" class="button" type="button">➕</button>
</div>
<div id="taskLists"></div>
<div class="footer">
<span> You have <span id="pendingTasks"></span> left </span>
<button type="button" id="clear">Clear All</button>
</div>
</div>
I am learning JavaScript and I am trying to create a to list. I have successfully been able to:
add new items to the list and able to cross off when each item is clicked
Append an edit button to each new item
I need help with this functionality:
add a trash can icon when the item is added
be able to add an event listener to each icon so that is deleted when clicked
3)Be able to edit each item and save it when the edit button is clicked
Any help would be appreciated!
https://codepen.io/stefan927/pen/qBVLpxm
"<html>
<body onload="taskComplete()">
<div class="card">
<div class="card-body">
<h3 class="card-title" id="header">Today's To Do List</h3>
<form id="todo-form">
<div class="input">
<input type="text" onfocus="this.value=''"
class="form-
control" id="todo-input" value="What do I want to do?">
</div>
<div class="form-group">
<input type="button" onclick = "addItemToTheList()"
class="btn btn-secondary btn-block" value="Add">
<p> Click an item to cross it off! </p>
</div>
</form>
</div>
<ul class="list-group list-group-flush" id="todo-list">
<li class="list-group-item">Pick up groceries
<i class="fas fa-trash-alt"></i> <button
class="edit">Edit</button>
</li>
<li class="list-group-item">Finish essay
<i class="fas fa-trash-alt"></i><button
class="edit">Edit</button>
</li>
<li class="list-group-item">Soccer # 5:00
<i class="fas fa-trash-alt"></i><button
class="edit">Edit</button>
</ul>
</div>
</body>
</html>"
"// Create an alert that asks for user name and then add it to
the heading.
//var name = prompt("Hello my name is");
//alert("Hello, " + name);
header.innerText = name + "'s To Do List";
// Define variables
var newItem = document.createElement("li");
var input = document.getElementById("todo-input");
var icon = "fas fa-trash-alt";
var i = document.createElement('i');
var editInput = document.createElement("input");
//button.edit
var editButton = document.createElement("button");
//button.delete
editButton.innerText = "Edit";
editButton.className = "edit";
// create a function that adds new items to the list with a trash
icon
function addItemToTheList() {
newItem.innerHTML = input.value;
input.value = "";
document.getElementById("todo-list").appendChild(newItem);
newItem.appendChild(editButton);
// Add click listener
newItem.addEventListener('click', done);
}
function done() {
this.className = "done";
this.removeEventListener('click',done);
}
// Initialize all listener for current undone tasks
function taskComplete() {
var undoneItems = document.getElementsByClassName('undone');
for(var i = 0; i < undoneItems.length; i++){
undoneItems[i].addEventListener('click', done);
}
// Delete item from list when trash icon is clicked
function deleteItem() {
i.onclick = deleteItem;
li.setAttribute('id', input.value);
li.classList.add("list-group-item");
i.className = icon;
}
//Edit an existing task
var editTask = function(){
console.log("Edit task...");
var listItem = this.parentNode;
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
//if the class pf parent is .editmode
if (containsClass){
//label text become the input's value
label.innerText = editInput.value;
} else {
//switch to .editmode
//input value becomes the label's text
editInput.vaule = label.innerText;
}
listItem.classList.toggle("editMode"); //toggle .editmode on the
parent
}
}"
I'm working on a to-do list project and I got a problem, I want that when I click on the submit button the input value becomes a list item but it doesn't work.
here's the code:
let btn = document.getElementById('btn')
let txt = document.getElementById('txt')
btn.addEventListener('click', function(){
let list = document.createElement('li')
list.innerHTML = txt.value
})
<h1 id="title">To do list</h1>
<div class="main">
<input type="text" alt="type text here" id="txt">
<button type="submit" id="btn">Submit</button>
</div>
you forgot document.body.appendChild(list);
You need to have a ul (if it is to be an unordered list) element in your document - or to create one with JS, and then you need to add the new list items to that (not to the body).
Try this snippet (where the ul element is already in the document)
let btn = document.getElementById('btn')
let txt = document.getElementById('txt')
let ul = document.getElementById('ul');
btn.addEventListener('click', function() {
let list = document.createElement('li')
list.innerHTML = txt.value;
ul.appendChild(list);
})
<h1 id="title">To do list</h1>
<div class="main">
<input type="text" alt="type text here" id="txt">
<button type="submit" id="btn">Submit</button>
</div>
<ul id="ul">
</ul>
I'm trying to display the user input through the submit button. The user will input tool types and then the first five inputs will be displayed in the li's. Then as the limit of 5 tools is reached, another function prints 'Thanks for your suggestions'. However, I can't get the function to print out any of the user input for suggested tools. Could someone help me understand why they aren't printing out?
<script src="modernizr.custom.05819.js">
var i = 1;
var listItem = "";
function processInput() {
if (i <= 5) {
listItem[0] += 1;
listItem = toolBox;
var toolBox = "";
alert("This is running");
if (i == 5) {
var resultsExpl = "Thanks for your suggestions";
}
}
var backSubmit = document.getElementById("button");
if (backSubmit.addEventListener) {
backSubmit.addEventListener("click", calcTotal, false);
} else if (backsubmit.attachEvent) {
backSubmit.attachEvent("onclick", calcTotal);
}
}
</script>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox"/>
</fieldset>
<fieldset>
<button type="submit" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
Here's the working DEMO to your problem.
I have removed the button type as submit because in some browsers instead of calling the function processInput it will submit the form.
Here is my JavaScript that I changed,
var count=1;
function processInput(){
var tool = document.getElementById("toolBox").value;
document.getElementById("toolBox").value = "";
if(count==5){
document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
document.getElementById("item"+count).innerHTML = tool;
}else{
document.getElementById("item"+count).innerHTML = tool;
count++;
}
}
function resetForm(){
document.getElementById("results").innerHTML = '<ul><li id="item1"></li><li id="item2"></li><li id="item3"></li><li id="item4"></li><li id="item5"></li><p id="resultsExpl"></p></ul>';
}
The only change I made to your HTML code was to add formId as the id for your form.
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form id="formId">
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox"/>
</fieldset>
<fieldset>
<button type="button" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
For me not much of this was working so I modified your code a bit to this working example. Each input fills in the <li> fields in order. On the 5th entry, you get alerted, and on the reset button the <li>'s are blanked out. Was not sure if this is what you were going for specifically but it sounded like it
var i = 1;
function processInput() {
if (i <= 5) {
document.getElementById('item' + i).innerHTML = document.getElementById('toolBox').value;
document.getElementById('toolBox').value = '';
if (i == 5) {
alert('Thank you for your suggestions');
} else {
i++;
}
}
}
function resetForm() {
while (i >= 1) {
document.getElementById('item' + i).innerHTML = '';
i--;
}
i = 1;
}
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox"/>
</fieldset>
<fieldset>
<button type="button" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
I'll try to list some of the problems you have into your code:
Defining a script tag with the src attribute, and writing code inline, this will never work
Defining some global variables, and although this isn't a bug, it's a really bad design
Declaring a variable listItem as an empty string, and then using its 1st character to increment a Number, I don't realize exactly what you're trying to do here.
Then, you set an undefined/undeclared toolBox variable to the listItem string
And, afterall, you add a click event handler to the submit button, but to an undefined callback
Well, since your code doesn't make much sense for me, but I think I got what you're trying to achieve, I've made an example of your code updated, and you can check the full commented code below:
/* we encapsulate your hole code into an IIFE (Immediately-Invoked Function Expression)
the goal here is to not polute the global scope, so the variable declarations reside inside it */
(function(d) {
/* that's the counter you already had, I renamed it from i to item */
var item = 1;
/* we cache all the elements we're going to use here, by getting them by id */
var txt = d.getElementById('toolBox'),
btn = d.getElementById('button'),
reset = d.getElementById('reset'),
results = d.getElementById('results'),
resultsExpl = d.getElementById('resultsExpl');
/* we add the 'click' event handlers to our buttons
it's better than puting directly inside the HTML, because it's a better design
this approach is known as Unobstrusive Javascript */
btn.addEventListener('click', processInput);
reset.addEventListener('click', resetForm);
/* your processInput function, with the same logic you had, but fixed */
function processInput() {
if (item <= 5) {
/* here, we get the li tag by its id, concatenating the string 'item' to our variable item */
var li = d.getElementById('item' + item);
/* we must use the property textContent to change the text of the li
and we get the user's input by getting its property value */
li.textContent = txt.value;
/* then, we increment our counter. the code below is the same as item += 1 */
item++;
}
/* if the last item was inserted, we show our message */
if (item > 5) {
resultsExpl.textContent = 'Thanks for your suggestions';
}
}
function resetForm() {
/* to reset our form, firstly I loop through all the lis inside the div results */
[].forEach.call(results.querySelectorAll('li'), function(el, i) {
/* and I change each li textContent property to an empty string */
el.textContent = '';
});
/* then, we set our input's value to empty, and we also reset our item variable to 1 */
txt.value = '';
item = 1;
}
})(document); /* I'm passing the document as a parameter, so I can use inside the IIFE as the variable d */
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox" />
</fieldset>
<fieldset>
<button type="submit" id="button">Submit</button>
<button type="button" id="reset">Reset</button>
</fieldset>
</form>
A little tidied up version of Saumil Soni's post:
var count=1;
var done;
function processInput(){
var tool = document.getElementById("toolBox").value;
if (done!=1) {
document.getElementById("toolBox").value = "";
}
if(count==5){
if (done!=1) {
document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
document.getElementById("item"+count).innerHTML = tool;
done = 1;
}
}else{
if (done!=1) {
document.getElementById("item"+count).innerHTML = tool;
count++;
}
}
}
function resetForm() {
location.reload();
}
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form id="formId" onSubmit="processInput(); return false;">
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox"/>
</fieldset>
<fieldset>
<button type="button" id="button" onclick="processInput()">Submit</button>
<button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
</fieldset>
</form>
I am attempting to make a todo list.Not too sure why my code isn't working.Trying to get the value from the add item input to the To-Do ul.
HTML
<body>
<div class = 'container'>
<h3> Add Item </h3>
<input id='newTask' type='text'> <button id='addTaskButton'> Add </button>
<h3> To-Do </h3>
<ul id='toDo'>
<li> <input type='checkbox'<label> Learn Javascript </label> <button class='delete'> Delete </button> </li>
</ul>
<h3> Completed </h3>
<ul id='completedTasks'>
<li> <input type='checkbox' checked> <label> Buy Peanut Butter </label> <button class='delete'> Delete </button> </li>
</ul>
</div>
<script src = "todolist.js" type="text/javascript"></script>
</body>
Javascript
var taskInput = document.getElementById('newTask');
var addTaskButton = document.getElementById('addTaskButton');
var incompleteTasks = document.getElementById('toDo');
var completedTask = document.getElementById('completedTasks');
var addTask = function () {
var text = taskInput.value;
var li = '<li>' + text + '<li>';
incompleteTasks.appendChild(li);
}
addTaskButton.onclick = addTask;
Any help is greatly appreciated.
Thanks
appendChild accepts a DOMElement, not a string. You need to create an element first and then append it:
var addTask = function () {
var text = taskInput.value;
var li = document.createElement('li');
li.innerHTML = text;
incompleteTasks.appendChild(li);
}
Demo: http://jsfiddle.net/6wbsujL5/