数组值不能在javascript的其他函数中访问
Array value not accesible in another function in javascript
我正在开发一个简单的通讯录。我使用四个不同的数组来存储用户的姓名，电话号码，地址和电子邮件。当我调用add()方法时，它向这些数组添加值，但当我调用display details时，它显示地址簿为空，所有这些数组为空。提前感谢您的帮助。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Address Book</title>
<link rel="stylesheet" type="text/css" href="addressBook.css" />
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$('#add').click(function () {
add();
});
$('#delete').click(function () {
remove_con();
});
$('#view').click(function () {
display();
});
});
</script>
<script type="text/javascript">
var BOOK = new Array();
var BOOKNO = new Array();
var ADDR = new Array();
var EMAIL = new Array();
function add() {
//Take values from text fields
var conname = document.getElementById('userNam').value;
var lenname = BOOK.length;
var x = BOOK.indexOf(conname);
var conno = document.getElementById('userNo').value;
var lenno = BOOKNO.length;
var y = BOOKNO.indexOf(conno);
var conaddr = document.getElementById('userAdd').value;
var lenaddr = ADDR.length;
var z = ADDR.indexOf(conaddr);
var conemail = document.getElementById('userEmail').value;
var lenemail = EMAIL.length;
var w = EMAIL.indexOf(conemail);
//Validations
if (conname.length == 0) {
alert("Name field cannot be blank");
return;
}
else if (conno.length == 0) {
alert("Phone number field cannot be Left blank");
return;
}
else if (conno.length != 10) {
alert("Enter a Valid Phone Number");
return;
}
else if (conaddr.length == 0) {
alert("Address field cannot be blank");
return;
}
else if (conemail.length == 0) {
alert("Email field cannot be blank");
return;
}
//RegEX
alphaExp = /^[a-zA-Z]+$/;
numExp = /^[0-9]+$/;
betaExp = /^'w+([-+.']'w+)*@'w+([-.]'w+)*'.'w+([-.]'w+)*$/;
if (!conname.match(alphaExp)) {
alert("Please enter alphabets only");
return;
}
else if (!conno.match(numExp)) {
alert("Please enter numerals only");
return;
}
else if (!conemail.match(betaExp)) {
alert("Please enter a valid email");
return;
}
else if (y >= 0) {
alert("Phone number already Present");
return;
}
else {
BOOK[lenname] = conname;
BOOKNO[lenno] = conno;
ADDR[lenaddr] = conaddr;
EMAIL[lenemail] = conemail;
var l = BOOK.length;
alert("Contact " + conname + " Added Sucesfully!!!!" +l);
return BOOK,BOOKNO,ADDR,EMAIL;
}
}
function display() {
//document.getElementById('hiddenDiv').style.display = "block";
BOOK = BOOK.sort();
var l = BOOK.length;
alert(l);
var view = "";
if (l == 0) {
document.getElementById('hiddenDiv').innerHTML = "ADDRESS BOOK EMPTY!!!";
}
if (l >= 1) {
view = view + "<table border=1px><tr><td><B>NAME</B></td><td><B>PHONE NUMBER</B></td><td><B>ADDRESS</B></td><td><B>EMAIL</B></td>";
for (var i = 0; i < BOOK.length; i++) {
view = view + "<tr><td>" + BOOK[i] + "</td><td>" + BOOKNO[i] + "</td><td>" + ADDR[i] + "</td><td>" + EMAIL[i] + "</td></tr>";
}
document.getElementById('hiddenDiv').innerHTML = view + "</table>";
}
}
function remove_con() {
var remname = prompt("Enter the name to be removed");
var remlen = BOOK.LENGTH;
/*var remnam=document.getElementById('name').value;
var remno=document.getElementById('phno').value;*/
var z = BOOK.indexOf(remname);
var z1 = z;
var z2 = z;
var z3 = z;
if (remlen == 0) {
alert("ADDRESS BOOK IS EMPTY");
return;
}
if (z >= 0) {
BOOK.splice(z, 1);
BOOKNO.splice(z1, 1);
ADDR.splice(z2, 1);
EMAIL.splice(z3, 1);
alert("Contact deleted");
}
if (z == -1) {
alert("Contact not present");
}
}
function searchcon() {
var lenn1 = BOOK.length;
if (lenn1 == 0) {
alert("ADDRESS BOOK EMPTY");
return;
}
var coname = prompt("Enter name");
var ind = BOOK.indexOf(coname);
if (ind >= 0) {
alert("contact found");
return;
}
else {
alert("Contact not present in address book");
}
}
</script>
</head>
<body>
<div id="mainDiv">
<header id="startHeader">
<p id="headerPara">Welcome to Address Book</p>
</header>
<div id="midDiv">
<form id="submissionForm">
<div class="entryDiv">
<p class="inputType">Name:</p>
<input id="userNam" type="text" class="buttonsClass" placeholder="Enter Your Name" required="" />
</div>
<div class="entryDiv">
<p class="inputType">Number:</p>
<input id="userNo" type="text" class="buttonsClass" placeholder="Enter Your Number" required="" />
</div>
<div class="entryDiv">
<p class="inputType">Address:</p>
<input id="userAdd" type="text" class="buttonsClass" placeholder="Enter Your Address" required="" />
</div>
<div class="entryDiv">
<p class="inputType">Email:</p>
<input id="userEmail" type="email" class="buttonsClass" placeholder="Enter Your Email" required="" />
</div>
<div id="Buttons">
<input id="reset" type="reset" value="Reset" />
<input id="delete" type="button" value="Delete Contact" />
<input id="view" type="button" value="View Book" />
<input id="add" type="submit" value="AddToContacts" />
</div>
</form>
<div id="hiddenDiv">
</div>
</div>
</div>
</body>
</html>
将添加按钮的类型"submit"更改为"button"，然后从添加函数中删除返回语句，因为它不需要。
这段代码有很多问题
您不需要四个数组来存储地址详细信息。您可以创建一个数组，其中可以包含包含地址信息的对象。例如
var Address=function(name,address,email,mobile){ this.name=name; this.address=address||"not available"; this.email=email||"not available"; this.mobile=mobile; } var AddressBook=new Array(); //Adding data in address book AddressBook.push(new Address("jhon","baker street","a@in.com","049372497"))你可以使用jquery来获取元素的值，而不是纯javascript。如:
var conname = document.getElementById('userNam').value; //instead of this use jquery var conname=$("#userNam").val(); // recommended approach不需要在任何地方计算数组长度。检查重复的手机号码，你可以写一个函数。您可以在代码中进行许多其他改进。有关更多示例，请访问Jquery站点和Github公共存储库。
小提琴演示/strong>
将<input id="add" type="submit" value="AddToContacts" />更改为type="button"。type="submit"将刷新页面以形成action，并将重置所有变量，包括BOOK。
相关文章：
- 对其他函数使用匿名函数's参数
- 创建要在其他函数中使用的全局变量
- 在Jquery调用之间添加其他函数
- Mocking console.log(）/MOCHA测试框架中的任何其他函数
- 如何从ipify函数返回ip地址，以便在其他函数中使用
- 如果没有其他函数链接到promise，则默认行为
- Javascript创建函数，以便在其他函数之间共享变量
- 使通过函数加载的JSON可用于其他函数
- 可以获取模板实例值，但不能将其用于其他函数
- 如何停止一个函数并将其他函数设置为在 html5 的 javascript 中加载时运行
- 这个关键字位于$.ajax(）中，用于调用其他函数来设置url
- SQLite+Javascript:在每个其他函数中执行多个查询
- 调用geocomplete中的其他函数
- 如何在 javascript 中将变量传递给对象内的其他函数
- 如何在Javascript中创建一个调用其他函数的函数
- 我用脚本创建了一个按钮.我可以通过点击按钮调用其他函数吗?我这样做，但失败了
- AJAX请求返回Javascript获胜't返回特定函数，但将返回其他函数
- 如何在其他函数中使用fn作为函数参数
- 返回带有其他函数的变量
- 如何在ES6中使用Arrow函数引用对象内部的其他函数
