Javascript button for todo list doesn't work - javascript

I'm trying to get my button for my To-do list to work for days now.. The button is not working but I can't figure out what the problem is. I don't want to use "onclick" in the html file I want to do the click event in the javascript file.
And then I have been trying to figure out how to get the To-do list to work with adding new tasks and being able to mark the task complete without removing it but it was harder than i thought.. I'd love to get some pointers! Appreciate it guys
var closebtn = document.getElementsByClassName("close");
function todolist(){
var li = document.createElement('li');
var btn = document.getElementById('my-button').onclick = function(){
var list = document.getElementById('list');
var input = document.getElementById('task').value;
var func = addEventListener('my-button');
var textnode = documentcreateTextNode(input);
li.appendChild(textnode);
if (input === ' '){
alert("write")
} else {
document.getElementById(list).appendChild(li);
}
document.getElementById('task').value = " ";
var thePanTag = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
thePanTag.className = "close";
thePanTag.appendChild(txt);
li.appendChild(thePanTag);
for (i = 0; i < closebtn.length; i++){
closebtn[i].onclick = function(){
var Div = this.parentElement;
Div.style.display = none;
}}}}
<body>
<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">
<li>kaa</li>
<li>baa</li>
<li>ss</li>
<li>aa</li>
<li>aaa</li>
</ul>

I removed the unnecessary code and be aware of using the correct onlick function.
Try this:
var closebtn = document.getElementsByClassName("close");
todolist();
function todolist(){
var li = document.createElement('li');
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!=''){
li.appendChild(document.createTextNode(input));
ul.appendChild(li);
}
}
}
<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">
<li>kaa</li>
<li>baa</li>
<li>ss</li>
<li>aa</li>
<li>aaa</li>
</ul>

Related

adding a date to the items in the list and displaying them on a webpage

I am completely lost on a task where I have to add a date to the items when they are created, store them in a list and then present on my webpage.
my javascript code
var counter=4;
var completelist = document.getElementById("thelist");
var currentTime = new Date();
todo=[todo1,todo2,todo3];
todoButton.onclick=function addelement() {
var userTodoInput = document.getElementById("todoInput");
if(userTodoInput.value!=="" ){
let node = document.createElement("LI");
node.innerHTML = userTodoInput.value;
completelist.appendChild(node);
todo.push(userTodoInput);
document.getElementById("mydiv").innerHTML += "<div class='todo' ><p id='t-list'> You have added this to the list of actions: " + userTodoInput.value + "</p></br></div>";
} else {
alert("Enter something in textarea")
}
counter++;
}
My dom
<div class="todo-container" >
<h1 class="about-heading">The todo list </h1>
<p id="todo-paragraph">On this page you are able to add new items to your to-do list </p>
<div class="todo-items">
<ul id="thelist">
<li class="todo"id="todo1">Item 1</li>
<li class="todo" id="todo2">Item 2</li>
<li class="todo" id="todo3"> Item 3</li>
</ul>
<input id="todoInput" type="text" name="todoInput" placehoder="Type your to-do here">
<button id="todo-button" >Add Item </button>
<div id="mydiv">
</div>
</div>
what would you suggest on this?
The problem is, your todoButton is not defined anywhere in your code.
If you add var todoButton = document.getElementById("todo-button");, your script should be working.
EDIT:
If you want to append date to user input, check edited code below. I stored userTodoInput and currentTime to single variable, named newItem and then place the variable on places you need it. I hope this help.
var counter = 4;
var completelist = document.getElementById("thelist");
var currentTime = new Date();
todo = [todo1, todo2, todo3];
todoButton.onclick = function addelement() {
var userTodoInput = document.getElementById("todoInput");
if (userTodoInput.value !== "") {
let node = document.createElement("LI");
let newItem = `${userTodoInput.value} ${currentTime}`;
node.innerHTML = newItem;
completelist.appendChild(node);
todo.push(newItem);
document.getElementById("mydiv").innerHTML += "<div class='todo' ><p id='t-list'> You have added this to the list of actions: " + newItem + "</p></br></div>";
} else {
alert("Enter something in textarea")
}
counter++;
Take a look to the following commented code. Obviously it is a basic implementation, but I think that main concepts are clear:
// GET ELEMENTS.
const list = document.getElementById('list');
const input = document.getElementById('input');
const button = document.getElementById('button');
const onClickHandler = () => {
// CHECK FOR TO-DO NAME.
if (input.value) {
// USE ELEMENT CHILDREN COUNT AS INDEX.
const index = list.children.length;
// CREATE li ELEMENT PROGRAMMATICALLY.
const li = document.createElement('LI');
// INSTANTIATE A NEW DATE OBJECT.
const date = new Date();
// ADD ATTRIBUTES.
li.id = `todo${index}`;
li.class = 'todo';
li.innerText = `${input.value} - ${date.toString()}`;
// ADD ELEMENT TO DOM.
list.appendChild(li);
} else {
alert('Please type your to-do.')
}
};
// ADD EVENT LISTENER.
button.addEventListener('click', onClickHandler);
<div>
<h1>The todo list</h1>
<p>On this page you are able to add new items to your to-do list</p>
<div>
<ul id="list"></ul>
</div>
<input id="input" type="text" name="todo" placeholder="Type your to-do here">
<button id="button" type="button">Add Item</button>
</div>

response time childElementCount delayed

basically i need to get in real time the quantity of numbers added, depending on whether I add or remove these numbers, but the way i did it has a very annoying delay, assigns the function to the add button and it only updates when it is pressed, so if i add a number by pressing it, it does not update until i add another one and if i remove a number by pressing x nothing happens
// add dozens
var form = document.getElementById('addForm');
var itemList = document.getElementById('items');
function childCount() {
var x = document.getElementById("items").childElementCount;
var x = eval(x);
document.getElementById("Result").innerHTML = " " + x + " selected";
}
// Form submit event
form.addEventListener('submit', addItem);
// Delete event
itemList.addEventListener('click', removeItem);
// Add item
function addItem(e) {
e.preventDefault();
// Get input value
var newItem = document.getElementById('item').value;
// Create new li element
var li = document.createElement('li');
// Add class
li.className = 'list-group-item';
// Add text node with input value
li.appendChild(document.createTextNode(newItem));
// Create del button element
var deleteBtn = document.createElement('button');
// Add classes to del button
deleteBtn.className = 'btn btn-danger btn-sm float-right delete';
// Append text node
deleteBtn.appendChild(document.createTextNode('X'));
// Append button to li
li.appendChild(deleteBtn);
// Append li to list
itemList.appendChild(li);
}
// Remove item
function removeItem(e) {
if (e.target.classList.contains('delete')) {
if (confirm('confirme para remover a aposta')) {
var li = e.target.parentElement;
itemList.removeChild(li);
}
}
}
<div id="main">
<form id="addForm">
<div class="sel">select
<input type="number" class="adds" id="item" min="0" max="99" value="0"> </input>
<button onclick="childCount()">add</button>
</div>
</form>
<ul id="items"> </ul>
<div id="Result" value="0">selected</div>
</div>
i make some changes in your code and now its working like you want :
// add dozens
var itemList = document.getElementById('items');
var result = document.getElementById('Result');
var input = document.getElementById('item');
function childCount() {
result.innerHTML = itemList.childElementCount + " selected"
}
// Add item
function addItem(e) {
// Get input value
var newItem = input.value;
// Create new li element
var li = document.createElement('li');
// Add class
li.className = 'list-group-item';
// Add text node with input value
li.appendChild(document.createTextNode(newItem));
// Create del button element
var deleteBtn = document.createElement('button');
// Add classes to del button
deleteBtn.className = 'btn btn-danger btn-sm float-right delete';
deleteBtn.onclick = (e)=>{
removeItem(e);
}
// Append text node
deleteBtn.appendChild(document.createTextNode('X'));
// Append button to li
li.appendChild(deleteBtn);
// Append li to list
itemList.appendChild(li);
childCount();
}
// Remove item
function removeItem(e) {
if (e.target.classList.contains('delete')) {
if (confirm('confirme para remover a aposta')) {
var li = e.target.parentElement;
itemList.removeChild(li);
childCount();
}
}
}
<body onload="childCount()">
<div id="main">
<div class="sel">select
<input type="number" class="adds" id="item" min="0" max="99" value="0"> </input>
<button onclick="addItem()">add</button>
</div>
<ul id="items"> </ul>
<div id="Result" value="0"></div>
</div>
<script src="test.js"></script>
</body>

Can't delete a new item from a list in JavaScript

I am learing basics of JavaScript and I have coded a simple shopping list with a delete button. This option works with old items, but when I add a new one and try to delete it, it does not work properly.
HTML:
var lista = document.querySelector('#list')
document.getElementById('add').addEventListener('click', function() {
var deletebtn = "<span class='close'>X</span>"
var newValue = document.getElementById('new_item').value + ' ' + deletebtn;
var newItem = document.createElement('li');
newItem.innerHTML = newValue;
lista.appendChild(newItem);
}, false)
var closebtn = document.getElementsByClassName('close');
for (var i = 0; i < closebtn.length; i++) {
closebtn[i].addEventListener('click', function() {
this.parentElement.style.display = 'none';
})
}
<div id=”page”>
<h1 id=”header”>Shopping list</h1>
<h2>What should I buy</h2>
<ul id="list">
<li id="one">Milk<span class="close">X</span></li>
<li id="two">Apples<span class="close">X</span></li>
<li id="three">Oranges<span class="close">X</span></li>
<li id=”four”>Vodka<span class="close">X</span></li>
</ul>
<input type="text" placeholder="Type in a new item" id="new_item"><button id='add'>ADD</button>
</div>
It's because your new item does not have the click event listener attached.
Add event listener for the close button like this:
var deletebtn = document.createElement('span');
// ...add class, inner html...
deletebtn.addEventListener('click', deleteFunc);
Also, make your delete function a reusable function and attach it like this:
function deleteFunc() {
this.parentElement.style.display = 'none';
}
...
closebtn[i].addEventListener('click', deleteFunc)
...

unable to insert to Child in Div with JavaScript

I am new to JavaScript and struck at the point where I am getting errors while inserting two elements, one is-page element and second is Button in the span tag, into one div elements.
document.getElementById('buttonForAddingItemToTheList').addEventListener('click', function() {
var getElementFromTheInput = document.getElementById('inputItemOfHtml').value;
//list item for page
var toCreateTheElementOfList = document.createElement('p');
//button tag
var toCreateTheButton = document.createElement('button');
toCreateTheButton.innerText = "Remove";
//span tag
var toCreateTheSpanForButton = document.createElement('span');
toCreateTheSpanForButton.setAttribute('class', 'classForTheButtonCreateByJavaScript');
//div tag
var toCreateTheElementOfDivContainer = document.createElement('div');
toCreateTheElementOfDivContainer.setAttribute('class', 'divContainerCreatedInJavaScript');
toCreateTheElementOfList.innerText = getElementFromTheInput;
toCreateTheSpanForButton.appendChild(toCreateTheButton);
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfLists);
toCreateTheElementOfDivContainer.appendChild(toCreateTheSpanForButton);
document.getElementById('containerToStoreListItem').appendChild(toCreateTheElementOfDivContainer);
});
<input type="text" placeholder="Enter List Item Here..." id="inputItemOfHtml"><br><br>
<button id="buttonForAddingItemToTheList">Add</button><br><br><br>
<div id="containerToStoreListItem">
</div>
There is typo error in your code
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfLists);
it should be
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
document.getElementById('buttonForAddingItemToTheList').addEventListener('click', function() {
var getElementFromTheInput = document.getElementById('inputItemOfHtml').value;
//list item for page
var toCreateTheElementOfList = document.createElement('p');
//button tag
var toCreateTheButton = document.createElement('button');
toCreateTheButton.innerText = "Remove";
//span tag
var toCreateTheSpanForButton = document.createElement('span');
toCreateTheSpanForButton.setAttribute('class', 'classForTheButtonCreateByJavaScript');
//div tag
var toCreateTheElementOfDivContainer = document.createElement('div');
toCreateTheElementOfDivContainer.setAttribute('class', 'divContainerCreatedInJavaScript');
toCreateTheElementOfList.innerText = getElementFromTheInput;
toCreateTheSpanForButton.appendChild(toCreateTheButton);
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
toCreateTheElementOfDivContainer.appendChild(toCreateTheSpanForButton);
document.getElementById('containerToStoreListItem').appendChild(toCreateTheElementOfDivContainer);
});
<input type="text" placeholder="Enter List Item Here..." id="inputItemOfHtml"><br><br>
<button id="buttonForAddingItemToTheList">Add</button><br><br><br>
<div id="containerToStoreListItem">
</div>
You have a typo mistake in third last line
toCreateTheElementOfLists should be toCreateTheElementOfList
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
https://jsfiddle.net/2wsuj0fr/

I dont know why this code does not add li element

In console, am getting undefined, but I can't understand.
JS Fiddle
function createItem(element) {
var li = document.createElement('li');
li.innerText = element.value;
var ul = document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input")
document.getElementById("submit").onclick = createItem;
console.log(element);
Based on your fiddle, the form is being submitted, in order to prevent that in the below code I have used the event.preventDefault, and then you need to pass the element parameter to the createItem function.
function createItem(element) {
var li=document.createElement('li');
li.innerText=element.value;
var ul=document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input");
document.getElementById("submit").onclick=function(e){
event.preventDefault();
createItem(element);
};
try this :)
function createItem(element) {
var li = document.createElement('li');
li.innerText = document.getElementById("input").value;
var ul = document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input")
document.getElementById("submit").onclick = createItem;
console.log(element);
<ul id="todo">
</ul>
<input id="input" >? </input>
<button id="submit" />

Categories

Resources