下面是代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function submit()
{
var ul = document.getElementById("names");
var name = document.getElementById("name").value;
var i = 0, flag = 0;
var allNames = [];
if (allNames.length == 0)
{
allNames[0] = name;
}
else
{
if (allNames.includes(name))
{
alert("Name already exists.");
return -1;
}
else
{
allNames[i++] = name;
}
}
var li = document.createElement("li");
li.innerHTML = name;
ul.appendChild(li);
document.getElementById("name").value = "";
}
</script>
</head>
<body>
<input type="text" id="name">
<button onclick="submit()">Submit</button>
<div>
<h2>Usernames</h2>
<ul id="names"></ul>
</div>
</body>
</html>
有没有任何方法可以检查用户名是否已经存在,从而阻止新条目,只使用JavaScript?
我也试过将数组的初始化移到函数之外,但也不是这样。。。
是的,只需在函数外部声明allnames
变量即可。 当前,每次调用submit函数时,您都用一个空数组创建它。
您还有一个问题,因为您的i
每次都被设置为0。
只要使用.push
,如果没有包含它。
null
var allNames = [];
function submit() {
var ul = document.getElementById("names");
var name = document.getElementById("name").value;
if (allNames.includes(name)) {
alert("Name already exists.");
return -1;
} else {
allNames.push(name);
}
var li = document.createElement("li");
li.innerHTML = name;
ul.appendChild(li);
document.getElementById("name").value = "";
}
<input type="text" id="name">
<button onclick="submit()">Submit</button>
<div>
<h2>Usernames</h2>
<ul id="names"></ul>
</div>