Question

我正在开发一个简单的地址簿。我使用四个不同的数组来存储用户的姓名，电话号码，地址和电子邮件。当我调用add（）方法时，它会向这些数组添加值，但是当我调用显示详细信息时，它显示的地址簿为空，所有这些数组为空。在此先感谢请帮助..

        <!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>

Answer 1

更改添加按钮的类型＆＃34;提交＆＃34;到＆＃34;按钮＆＃34;然后从add函数中删除return语句，因为它不需要。

此代码存在许多问题。

您不需要四个数组来存储地址详细信息。你可以创建一个可以包含地址信息对象的数组。

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公共存储库。

Fiddle Demo

Answer 2

将<input id="add" type="submit" value="AddToContacts" />更改为type="button"。 type="submit"会刷新页面以形成action并重置所有变量，包括BOOK。

javascript中的另一个函数无法访问数组值

2 个答案: