I have been looking all over for a correct answer on this but can’t seem to get one that works. I am trying to take input for an array that allows a max of 6 entries and does not allow duplicates. My code that I was playing around with only alerts me when I already have duplicates in the array. What would be the correct way to prevent a duplicate value from ever being added then displaying an error stating so?
I need to carry it over to list on the HTML doc but for right now I’m working on not allowing it to add duplicates so I’ve been using the Console tool
Any help would be much appreciated
Javascript:
"use strict"
//DO NOT MODIFY THE CODE BELOW
//wait for everything to load before executing this here code
$(document).ready(()=> {
// create a new constant to hold a date reference for the current moment
const dt = new Date();
//Get the current year from the date reference, and put it
//in the yield field in the footer.
$('#year').text(dt.getFullYear());
});
//ADD YOUR CODE BELOW
let franzList = [];
function addTo() {
franzList.push(document.getElementById("listItemInput").value);
console.log(franzList);
}
function clearList() {
franzList.length = 0;
}
function hasDuplicates(array) {
let valuesSoFar = Object.create(null);
for (let i = 0; i < array.length; ++i) {
let value = array[i];
if (value in valuesSoFar) {
return true;
}
valuesSoFar[value] = true;
}
return false;
}
$(document).ready(()=> {
$("#addItemToList").click( () => {
let error = false;
const listItemInput = $("#listItemInput").val().trim();
$("#listItemInput").val(listItemInput);
if(listItemInput == "") {
console.error("input field blank");
alert("Error! Franz Liszt's list item cannot be empty. This is unacceptable.
Franz Lizst demands you correct his list!");
error = true;
} else if (franzList.length > 5) {
console.error("6 items in the list only!");
alert("Error! Franz Listz's list can only hold 6 items!");
error = true;
} else if (hasDuplicates(franzList) === true) {
alert("Error! No duplicates allowed!")
error = true;
}
$("#listItemInput").val(listItemInput);
/*
if(checkDuplicate(franzList) == true) {
console.log("No Duplicates");
} else {
console.log("DUPLICATE NOT ALLOWED!");
alert("NO DUPLICATES ALLOWED");
error = true;
}
*/
if(!error) {
addTo();
$("#listItemInput").val("")
//if error message is displayed form will not submit
} else {
alert("Nothing added due to error");
}
})
$("#clearList").click( () => {
clearList();
})
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Yellowtail&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<main>
<h1>Franz Liszt's List</h1>
<h2>Listing Things Since 1811!</h2>
<p>Franz Liszt was more than a Hungarian composer, virtuoso pianist, conductor, music teacher, arranger, and organist of the Romantic era.</p>
<p>He was more than a writer, philanthropist, and Fraciscan tertiary.</p>
<p>No, Franz Liszt loved lists. </p>
<p>Let us pay homage to Franz Lizst's list love by adding some items to our list below.</p>
<div class="container">
<div class="left">
<!-- <label for="listItemInput">Input an item below:</label><br/>-->
<h3>Input an item below:</h3>
<input id="listItemInput" type="text" placeholder="Input item here"></input><br/>
<button id="addItemToList">Add Item to Franz Liszt's List</button> <br/>
<button id="clearList">Clear Franz Liszt's List</button>
<br/>
</div>
<div class="right">
<h3>Franz Liszt's List Items:</h3>
<ul id="listItemsHolder"></ul>
</div>
</div>
<footer>
©<span id="year"></span> - Franz Kafka. All rights reserved?
</footer>
</main>
</body>
</html>