I have been struggling with preventing duplicate items from being added to a shopping list that I created. Even though I thought the code below would solve the issue, it hasn't been effective so far. My expectation was for the JavaScript code to access the ul element and iterate through its list items in order to compare what is already on the list with the new item being added. I suspect the problem lies in accessing the input. Additionally, I am unsure about whether this functionality should be implemented within the createListElement function or the addListAfterClick function. Please refer to the provided code snippet to see how the code operates. Thank you in advance!!
var ul = document.getElementById("shoppingcart");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
if (input.value === items[i]); {
alert("already in list");
console.log("already in list");
}
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li");
function inputLength() {
return input.value.length; // retrieves the length of the input value
}
function createListElement() {
var li = document.createElement("li"); // creates a new li element
li.appendChild(document.createTextNode(input.value)); // adds the input value to the newly created li element
li.classList.add("item"); // adds a class called "item" to the new li element
li.addEventListener("click", toggleDone);
/* enables click functionality for the new item by referencing the toggleDone function, allowing toggling line-through
styling when an item on the list is clicked */
ul.appendChild(li); // appends the li element in the ul element
input.value = ""; // clears the input box for new inputs
var button = document.createElement("button"); // creates a new button element
button.appendChild(document.createTextNode("delete")); // creates a button labeled "delete"
li.append(button); // adds a delete button next to each new input in the shopping list
button.onclick = removeParent; // if the delete button is clicked, triggers the removeParent function to delete the input from the shopping list
}
function removeParent(event) {
event.target.parentNode.remove(); // deletes an input from the parent node, which is the ul element, as remember li elements are children of ul elements
}
function toggleDone() {
this.classList.toggle('done'); // references the CSS class ".done" for applying line-through styling, the toggle function switches the styling on and off
}
function addListAfterClick() {
if (inputLength() > 0) // checks if the input length is greater than 0..(meaning an input is needed to add to the list)
{
createListElement(); // calls the createListElement function to add a new li element with the input value and a delete button alongside
}
}
function addListAfterKeyPress(event) {
if (inputLength() > 0 && event.keyCode === 13) // if input length is greater than 0 and enter key (key code 13) is pressed
{
{
createListElement(); // calls createListElement function to add a new li element with the input value and a delete button alongside
}
}
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeyPress);<!DOCTYPE html>
<html>
<head>
<title> JavaScript + DOM </title>
</head>
<body>
<h1> Shopping List</h1>
<p id="first"> Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Click Me!</button>
<ul class="list" id="shoppingcart">
<li class="bold red" random="23"> Notebook</li>
</ul>
</body>
</html>