I am currently developing a straightforward todo list application using JavaScript.
The main functionality I am trying to implement is the ability to add new items from an input field to a list, as well as the option to remove items from the list.
While I have successfully created functions for storing input values and adding them to the list, I am facing difficulties with making the removal of elements work properly.
All necessary HTML, CSS, and JS code are provided. However, the removeItems() function seems to be malfunctioning.
const enterBtn = document.getElementById('enter');
const input = document.querySelector('input');
const ulList = document.querySelector('ul');
const delBtn = document.querySelector('button');
function inputLength() {
return input.value.length;
}
// The following function adds delete buttons to existing list items
function addDelButtonsToExistingItems() {
const liItems = document.querySelectorAll('li');
for (let i = 0; i < liItems.length; i++) {
const delBtn = document.createElement('button');
delBtn.appendChild(document.createTextNode('delete'));
liItems[i].appendChild(delBtn);
}
}
// Add delete buttons to already existing items in the document
addDelButtonsToExistingItems();
// Function to add new items from the input field
function addNewItem() {
if (inputLength() > 0) {
const newLiItem = document.createElement('li');
newLiItem.appendChild(document.createTextNode(input.value));
const delBtn = document.createElement('button');
delBtn.appendChild(document.createTextNode('delete'));
newLiItem.appendChild(delBtn);
ulList.appendChild(newLiItem);
input.value = '';
}
}
/**
* This function is intended to remove items from the list when the delete button is pressed
*/
function removeItems(e) {
if (e.target.tagName === 'BUTTON') {
e.target.classList.toggle('remove');
}
}
/**
* Toggle the 'done' class on list items when clicked
*/
function toggleDone(e) {
if (e.target.tagName === 'LI') {
e.target.classList.toggle('done');
}
}
// Handle the case where the enter key is pressed
function addOnEnterKeyPressed(e) {
if (e.keyCode === 13) {
addNewItem();
}
}
// Event listener for adding new items when the enter button is clicked
enterBtn.addEventListener('click', addNewItem);
// Event listener to trigger adding new items when the enter key is pressed
input.addEventListener('keypress', addOnEnterKeyPressed);
// Event listener to toggle the 'done' class
ulList.addEventListener('click', toggleDone);
// Event listener to handle item removal upon clicking the delete button
// ???????.done{
text-decoration: line-through;
}<!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">
<link rel="stylesheet" href="style.css">
<title>Shopping List</title>
</head>
<body>
<h1>Shopping List</h1>
<h3>Get it done today</h3>
<input type="text" name="input" id="input">
<button id="enter">Enter</button>
<ul>
<li>NoteBook</li>
<li>Pens</li>
<li>Eraser</li>
<li>CMPSC 412 book</li>
</ul>
<script src="script.js"></script>
</body>
</html>