I am trying to add delete button to each item in a list. Adding them works as long as I do not have the delete button.
const newcontainer = document.getElementById("toDoContainers");
//gets number of list items in todolist
//adds list item to list
function deleteitem(paramitem){
var element = document.getElementById(paramitem);
element.remove(paramitem);
}
function addnew(){
let numb = document.getElementById("todolistitems").childElementCount;
var listitem = document.createElement("li");
var reallist = document.getElementById("todolistitems");
var inputvar = document.getElementById("inputfield").value;
var node = document.createTextNode(inputvar);
let numbvar = numb +1;
listitem.appendChild(node);
listitem.setAttribute('id', numbvar);
listitem.addEventListener('onClick', deleteitem(listitem));
reallist.appendChild(listitem);
var inputvar = document.getElementById("inputfield").value="";
// node.appendChild(document.createTextNode(inputvar));
/// document.getElementById("toDoContainers").innerHTML=inputvar;
}
<h1>To Do List</h1>
<div class="container">
<input id="inputfield" type="text"><button id="addToDo" onclick="addnew()">Add</button>
<div class="tO" id="toDoContainers">
<ul id="todolistitems">
</ul>
</div>
</div>
I tried a thing where on each list item created, you can 'onclick'=deleteitem(item). I have tried using queryselector, getelementbyId, and queryselectorall in the delete function.
Adding list items works as long as I do not try adding the delete functionality.
There's a few errors in your code.
You've used 'onClick' instead of 'click' for the click event
Your click event assignment is actually running or interpreting the remove function and attempting to use the return value of the function as the click function.
You've also passed in the list item HTML element as opposed to the ID, which the function requires. This function then tries to use the element itself to find the element and then remove a child element with the same parameter - this will always return undefined.
You need to wrap this in another function that returns the function to be performed on click, and fix that error, as below:
const newcontainer = document.getElementById("toDoContainers");
//gets number of list items in todolist
//adds list item to list
function deleteitem(paramitem) {
var element = document.getElementById("list" + paramitem);
element.remove();
}
function addnew() {
let numb = document.getElementById("todolistitems").childElementCount;
var listitem = document.createElement("li");
var reallist = document.getElementById("todolistitems");
var inputvar = document.getElementById("inputfield").value;
var node = document.createTextNode(inputvar);
let numbvar = numb + 1;
listitem.appendChild(node);
listitem.setAttribute("id", "list" + numbvar);
listitem.addEventListener("click", function () {
deleteitem(numbvar);
});
reallist.appendChild(listitem);
var inputvar = (document.getElementById("inputfield").value = "");
// node.appendChild(document.createTextNode(inputvar));
/// document.getElementById("toDoContainers").innerHTML=inputvar;
}
<h1>To Do List</h1>
<div class="container">
<input id="inputfield" type="text"><button id="addToDo" onclick="addnew()">Add</button>
<div class="tO" id="toDoContainers">
<ul id="todolistitems">
</ul>
</div>
</div>
Related
I have a problem in Javascript.I am adding new list items to the 'ul' elements and this list is empty at first and I do not want to add same values twice. When I write the if statement I get the exception because my list is empty so the result return null.
How can I fix this this problem?
Thank you in advance...
Html Codes
<input type="text" id="the-filter" placeholder="Search For..." />
<div class="list-container">
<ul id="myList"></ul>
<button id="button">Click</button>
Javascript Codes
let newlist = document.querySelector("#myList");
const li = document.getElementsByClassName('list-group-item');
const button = document.getElementById("button");
const button.addEventListener('click' , listName);
const input = document.getElementById("the-filter");
function listName()
const inputVal = input.value;
for (i = 0; i < li.length; i++) {
if ((li[i].innerHTML.toLocaleLowerCase().includes(inputVal) && inputVal!="") ||
(li[i].innerHTML.toUpperCase().includes(inputVal) && inputVal!="")) {
let newItem = document.createElement("li");
li[i].classList.add("list-group-item");
let textnode = document.createTextNode(li[i].innerHTML.toLocaleLowerCase());
newItem.appendChild(textnode);
if((newlist.children[0].innerHTML.toLocaleLowerCase().includes(inputVal))){
newlist.insertBefore(newItem, newlist.childNodes[0]);
}
}
}
}
If I understood the task correct, you need to add items to the list by button click.
If same item exists (case insensitive), then nothing happens.
const list = document.querySelector("#myList");
const button = document.getElementById("button");
button.addEventListener("click", listName);
const input = document.getElementById("the-filter");
function listName() {
const inputVal = input.value;
const [...lis] = document.getElementsByClassName("list-group-item");
const same = lis.find((el) => el.textContent.toLowerCase() === inputVal.toLowerCase());
if (same) {
return;
}
let newItem = document.createElement("li");
newItem.classList.add("list-group-item");
newItem.textContent = inputVal;
list.appendChild(newItem)
}
<input type="text" id="the-filter" placeholder="Search For..." />
<div class="list-container">
<ul id="myList"></ul>
<button id="button">Click</button>
</div>
You're on the right track with event listeners and element creation, but your original code didn't quite seem to match your stated goal.
Here's a solution you might find useful, with some explanatory comments:
// Identifies some DOM elements
const
input = document.getElementById("my-input"),
newList = document.getElementById("my-list"),
items = document.getElementsByClassName('list-group-item'),
button = document.getElementById("my-button");
// Focuses input, and calls addItem on button-click
input.focus();
button.addEventListener('click', addItem);
// Defines the listener function
function addItem(){
// Trims whitespace and sets string to lowerCase
const inputTrimmedLower = input.value.trim().toLocaleLowerCase();
// Clears and refocuses input
input.value = "";
input.focus();
// Ignores empty input
if (!inputTrimmedLower) { return; }
// Ignores value if a list item matches it
for (const li of items) {
const liTrimmedLower = li.textContent.trim().toLocaleLowerCase();
if (liTrimmedLower === inputTrimmedLower) {
console.log(`${inputTrimmedLower} is already listed`);
return;
}
}
// If we got this far, we want to add the new item
let newItem = document.createElement("li");
newItem.classList.add("list-group-item");
newItem.append(inputTrimmedLower); // Keeps lowerCase, as your original code
newList.prepend(newItem); // More modern method than `insertBefore()`
}
<input id="my-input" />
<ul id="my-list"></ul>
<button id="my-button">Click</button>
I'm building a todo app and I use a function to create a list item entered by the user.
There is an event listener added to the output section to listen for a delete button click for each item displayed. My problem is that the delete button is only working for one item and then it stops working.
In the console, it appears that the function is actually called every time I press the button, but the functionality only works for one click. Do I need to add all the list items into an array perhaps?
const todo = document.getElementById('todo');
const enter = document.getElementById('enter');
const output = document.getElementById('output');
enter.addEventListener('click', () => {
listItem(todo);
});
let createListItem;
var deleteBtn;
let checkBtn;
function listItem(todo) {
createListItem = document.createElement('li');
createListItem.innerText = todo.value;
todo.value = '';
output.appendChild(createListItem);
checkBtn = document.createElement('button');
deleteBtn = document.createElement('button');
checkBtn.innerText = 'check';
deleteBtn.innerText = 'delete';
createListItem.append(checkBtn);
createListItem.append(deleteBtn);
checkBtn.classList.add('checkBtn');
deleteBtn.classList.add('deleteBtn');
}
output.addEventListener('click', deleteFunc);
function deleteFunc() {
console.log('function called');
createListItem.remove();
}
<section class="controls">
<div>
<label for="todo">Enter a to-do</label>
<input type="text" name="todo" id="todo">
</div>
<span>
<button id="enter" class = "enter"><i class="fas fa-paper-plane"></i></button>
</span>
</section>
<section>
<ul id="output" class="output">
</ul>
</section>
You need to delegate and use relative addressing because your code only removes the LAST added LI
The variable createListItem pollutes the global scope. Add the keyword var or let in the listItem function too
function deleteFunc(e) {
console.log('function called');
const tgt = e.target;
if (e.target.innerText==="delete") tgt.closest("li").remove()
}
Added benefit from this delegation is that adding the functionality to the "check" button is just
if (e.target.innerText==="check") ...
I would recommend to use a class and testing
if (e.target.classList.contains("delete")
instead of the innerText - especially if you want to change language of the button
const todo = document.getElementById('todo');
const enter = document.getElementById('enter');
const output = document.getElementById('output');
enter.addEventListener('click', () => {
listItem(todo);
});
let createListItem;
var deleteBtn;
let checkBtn;
function listItem(todo) {
let createListItem = document.createElement('li'); // use let or var here
createListItem.innerText = todo.value;
todo.value = '';
output.appendChild(createListItem);
checkBtn = document.createElement('button');
deleteBtn = document.createElement('button');
checkBtn.innerText = 'check';
deleteBtn.innerText = 'delete';
createListItem.append(checkBtn);
createListItem.append(deleteBtn);
checkBtn.classList.add('checkBtn');
deleteBtn.classList.add('deleteBtn');
}
output.addEventListener('click', deleteFunc);
function deleteFunc(e) {
console.log('function called');
const tgt = e.target;
if (e.target.innerText==="delete") tgt.closest("li").remove()
}
<section class="controls">
<div>
<label for="todo">Enter a to-do</label>
<input type="text" name="todo" id="todo">
</div>
<span>
<button id="enter" class = "enter"><i class="fas fa-paper-plane"></i></button>
</span>
</section>
<section>
<ul id="output" class="output">
</ul>
</section>
Your createListItem variable is a global that gets set to the most-recently appended item, so the delete function will always delete the most-recent item. Once an element el has already been removed from the DOM tree, el.remove() is a no-op, so it only works once.
To fix, you can either use event delegation as in #mplungjan's answer or assign a unique id to each list item and pass that as a parameter to the function to determine what to delete.
Example of the second approach:
<ul>
<li id="item-0"></li>
<li id="item-1"></li>
<li id="item-2"></li>
</ul>
const deleteById = id => document.querySelector(`#item-${id}`).remove()
First though:
I think os because you are targeting the "ul" instead the "li" elements. Try adding the event listeners to each "li" element with a querySelectorAll() instead of targeting "output" directly.
When you add another item, you call listItem() which sets a new value to createListItem. This means, when you call deleteFunc(), createListItem.remove(); is only executed on the last element you have added. If this item was already removed, your out of luck as well.
function deleteFunc(e) {
console.log('function called');
const { target } = e; // get target
target.closest("li").remove()
}
Remove the listener on output. (This line: output.addEventListener('click', deleteFunc);)
And add the listener to each deleteBtn:
checkBtn.classList.add('checkBtn');
deleteBtn.classList.add('deleteBtn');
deleteBtn.addEventListener('click', deleteFunc);
This might help you:
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
Find the solution.
const todo = document.getElementById('todo');
const enter = document.getElementById('enter');
const output = document.getElementById('output');
enter.addEventListener('click', () => {
listItem(todo);
});
let createListItem;
var deleteBtn;
let checkBtn;
var index = 0;
function listItem(todo) {
createListItem = document.createElement('li');
createListItem.innerText = todo.value;
createListItem.id= 'li' + index;
todo.value = '';
output.appendChild(createListItem);
checkBtn = document.createElement('button');
deleteBtn = document.createElement('button');
checkBtn.innerText = 'check';
deleteBtn.innerText = 'delete';
deleteBtn.id = 'btn' + index;
createListItem.append(checkBtn);
createListItem.append(deleteBtn);
checkBtn.classList.add('checkBtn');
deleteBtn.classList.add('deleteBtn');
deleteBtn.onclick = function() { deleteFunc(this); };
index += 1;
}
//output.addEventListener('click', deleteFunc);
function deleteFunc(e) {
var rowId = e.id.replace('btn','');
var row = document.getElementById('li'+rowId);
console.log('function called' + rowId);
//alert(rowId);
if (row != null) {
row.remove();
}
//console.log('function called');
//createListItem.remove();
}
<section class="controls">
<div>
<label for="todo">Enter a to-do</label>
<input type="text" name="todo" id="todo">
</div>
<span>
<button id="enter" class = "enter"><i class="fas fa-paper-plane"></i></button>
</span>
</section>
<section>
<ul id="output" class="output">
</ul>
</section>
How can I get add__deal__btn and do something with it?
When page loads, it does't exist and i can't get it, but after adding it how can i get it?
let addTitle = document.querySelector('.add__title');
let addBtn = document.querySelector('.add__btn');
let tasks = document.querySelector('.tasks');
let addDealBtn = [];
addBtn.onclick = function() {
let task = document.createElement('div');
task.className = 'task__card';
let taskTitle = document.createElement("h4");
taskTitle.innerHTML = addTitle.value
task.appendChild(taskTitle)
addDealBtn = document.createElement("button");
addDealBtn.className = "add__deal__btn";
addDealBtn.innerHTML = "Add deal";
task.appendChild(addDealBtn);
tasks.append(task);
}
<div class="add">
<input type="text" class="add__title">
<br>
<button class="add__btn">Add</button>
</div>
<div class="tasks"></div>
Thanks
After you have clicked on .add__btn:
let addBtn = document.querySelector('.add__btn');
addBtn.click(); // <= A computational click standing in for a user click
you can grab add__deal__btn using:
const addDealBtn = document.getElementsByClassName('add__deal__btn')[0];
Use document.getElementsByClassName to select elements on the page that have a given class applied to them. This returns an array. Then get the first item in the array (or, whichever one you want) using brackets:
document.getElementsByClassName("add__btn")[0]
I have a search input field, and I want to get the user's input dynamically and update a list contained in a <div>
I'm setting up a search solution for a catalogue where you can display a list of items.
Right now all the items are shown at once.
the html
<input type="search" id="search-field" placeholder="Search...">
</div>
<div class="container">
<p id="guide">Select a category from the menu</p>
<ul id="product-list">
</ul>
<script src="./preload.js"></script>
</div>
the js code
var fileList = document.getElementById('product-list');
var title = document.getElementById('guide');
title.innerHTML = `You are looking at the ${products} catalog.`;
for(var i = 0; i < thumbFiles.length; i++){
var pathName = thumbFiles[i];
var finalName = pathName.split('/').pop();
fileList.innerHTML = document.getElementById('product-list').innerHTML +
`<li class="product-container">
<div class="new-thumb">
<a href="${(items[i])}" id='product-placeholder' target="_blank">
<img src="${(thumbFiles[i])}" alt="thumb" class="thumbnail">
</a>
<h4>${(path.parse(finalName).name)}</h4>
</li>`
};
}
I expect to update the <ul> with the search input text matching element from the catalogue.
You can attach an oninput listener to your element, like this :
In your js script
const myInput = document.querySelector(‘#search-field’);
const fileList = document.querySelector('#product-list');
myInput.addEventListener(‘input’, () => {
// Don’t forget to clean your results on each new input
fileList.innerHTML = ‘’;
for(const index in thumbFiles) {
const pathName = thumbFiles[index];
const finalName = pathName.split('/').pop();
// Here is the function that will check if your current item match user input
if (match(finalName, myInput.value)) {
fileList.innerHTML += [your stuff]
}
}
});
this will trigger a function each time your input is changing value. Here, it calls our arrow function in which we pack all the actions we want to execute when user input some text.
EDIT
Forgot to compare with current input. You can get input value by calling myInput.value
An example of what match() can be :
function match(name, userInput) {
return name.includes(userInput);
}
This will just check if the finalName contains the user input.
I have a simple script that adds an 'li' element with input text value to the list after clicking a button, but I also want to clear this input after clicking the button. Here is the HTML:
<form class="form">
<input id="newInput" type="text" placeholder="Dodaj pozycję">
<button id="createNew" type="button">Dodaj</button>
</form>
<h2>Moja lista:</h2>
<div class="listBg">
<ul id="list">
</ul>
</div>
<button id="deleteAll" type="button">Wyczyść</button>
And JS:
function addItem(){
var myList = document.getElementById("list");
var newListItem = document.createElement("li");
var itemText = document.getElementById("newInput").value;
var listText = document.createTextNode(itemText);
newListItem.appendChild(listText);
if (itemText === "") {
alert("Pole nie może być puste");
} else {
myList.appendChild(newListItem);
}
};
function clearText(){
var itemText = document.getElementById("newInput").value;
itemText.innerText = "";
};
var addButton = document.getElementById("createNew");
addButton.addEventListener("click", function(){
addItem();
clearText();
});
function clearList(){
var myList = document.getElementById("list");
myList.innerHTML = "";
};
var deleteButton = document.getElementById("deleteAll");
deleteButton.addEventListener("click", clearList);
Commands are fine, I've tested it in console and inputing first
var itemText = document.getElementById("newInput").value;
And then
itemText.innerText = "";
Works just fine, but I cannot get it to work on click event. What am I doing wrong?
Your problem was that you were setting your variable to the value of the textbox, rather than the textbox itself:
function clearText(){
var itemText = document.getElementById("newInput").value; // <----
itemText.innerText = "";
};
This meant that the next line was attempting to set the innerText of the value, which doesn't work. Also, to set or get data to or from an input field, you use the value property. Input fields don't have innerHTML or innerText. In fact, innerText is not even a standard. In places where that makes sense, use textContent instead.
It's always better to set variables to reference DOM elements themselves instead of particular properties of the element. That way, you can access the element and get whatever you need, as often as you need to, without having to re-scan the DOM for the element again when a different property value is needed.
Here's the working code:
function addItem(){
var myList = document.getElementById("list");
var newListItem = document.createElement("li");
var itemText = document.getElementById("newInput").value;
var listText = document.createTextNode(itemText);
newListItem.appendChild(listText);
if (itemText === "") {
alert("Pole nie może być puste");
} else {
myList.appendChild(newListItem);
}
};
function clearText(){
// Just set your variable to the input element, not its value
var itemText = document.getElementById("newInput");
itemText.value = ""; // Form elements have a value property
};
var addButton = document.getElementById("createNew");
addButton.addEventListener("click", function(){
addItem();
clearText();
});
function clearList(){
var myList = document.getElementById("list");
myList.innerHTML = "";
};
var deleteButton = document.getElementById("deleteAll");
deleteButton.addEventListener("click", clearList);
<form class="form">
<input id="newInput" type="text" placeholder="Dodaj pozycję">
<button id="createNew" type="button">Dodaj</button>
</form>
<h2>Moja lista:</h2>
<div class="listBg">
<ul id="list">
</ul>
</div>
<button id="deleteAll" type="button">Wyczyść</button>