我一直在尋找一個正確的答案，但似乎無法找到一個有效的答案。我正在嘗試為一個最多允許 6 個條目且不允許重復的陣列輸入輸入。我正在玩的代碼只有在陣列中已經有重復項時才會提醒我。防止添加重復值然后顯示錯誤說明的正確方法是什么？
我需要把它帶到 HTML 檔案上，但現在我正在努力不允許它添加重復項，所以我一直在使用控制臺工具
任何幫助將非常感激
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>
uj5u.com熱心網友回復：
要驗證一個值是否重復，您可以將要檢查的值傳遞給hasDuplicates函式并使用 JavaScript 陣列內置方法includes()。
function hasDuplicates(array, value) {
return array.includes(value);
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/421453.html
標籤：
上一篇：有沒有辦法防止在Firebase存盤上隨機獲取照片？
下一篇：使用JSON作為驗證制作登錄頁面