Question

我正在尝试用Javascript，HTML写一个地址簿 - 但是我找不到它为什么不起作用的错误。我是一个非常初学者，所以如果有人能帮助我，我理解这个问题会非常友好。

这是JS代码，我在其中创建了3个对象并将其保存在数组中。我应该尝试创建“搜索”，“添加”和“显示全部”，但目前它无法正常工作......

var p1 = {
    firstName: "John",
    lastName: "Doe",
    phone: "(0043) 650 111-1111",
    mail: "person1@google.com"
};

var p2 = {
    firstName: "Jane",
    lastName: "Doe",
    phone: "(0043) 650 222-2222",
    mail: "person2@google.com"
};

var p3 = {
    firstName: "August",
    lastName: "July",
    phone: "(0043) 650 333-3333",
    mail: "person3@google.com"
};
var contacts = [p1, p2, p3];

function addField() {
    document.getElementById('add').style.display = 'block';
    document.getElementById("searching").style.display = "none";
    document.getElementById("listing").style.display ="none";
};

function searchField() {
    document.getElementById('add').style.display = 'none';
    document.getElementById("searching").style.display = "block";
    document.getElementById("listing").style.display ="none";
};

function printPerson(person) {
    document.getElementById("person").innerHTML = ("Name: " + 
    contacts[i].firstName + "<br/>Nachname: " + contacts[i].lastName+ "
    <br/>Mail" + contacts[i].mail + "<br/>Phone:" + contacts[i].phone);
}

function listContacts() {
    document.getElementById('add').style.display = 'none';
    document.getElementById("searching").style.display = "none";
    document.getElementById("listing").style.display = "block";
        var contactsLength = contacts.length;
        for (i = 0; i < contactsLength; i++) {
        printPerson(contacts[i]);
    }
};

function addContacts (firstName, lastName, phone, mail){
    this.firstName: document.getElementById("firstName").value,
    this.lastName: document.getElementById("lastName").value, 
    this.mail: document.getElementById("mail").value, 
    this.phone: document.getElementById("number").value,
};

function searchContacts(lastName) {
    var lastName = document.getElementById("last").value;
    var contactsLength = contacts.length;
    for (var i = 0; i < contactsLength; i++) {
        if (lastName === contacts[i].lastName) {
            printPerson(contacts[i]);
        };
    };
};


function searchContacts(firstName) {
    var firstName = document.getElementById("first").value;
    var contactsLength = contacts.length;
    for (var i = 0; i < contactsLength; i++) {
        if (firstName === contacts[i].lastName) {
            printPerson(contacts[i]);
        };
    };
};

我的HTML：我不确定在JS中正确使用innerHTML - 这是我第一次编写完整的HTML / JS

<DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>Adressbook</title>
    <link href="s_stylesheet.css" rel="stylesheet"/>
    <script src="s_jsfile.js"></script>
    </head>
    <body>
        <h1 id="main"> This is an addressbook </h1>
        <p id="test"> Please choose:</p><br/>
        <input class="buttons" type="button" value="Add new contact" 
        onClick="addField()"/>  
        <input class="buttons" type="button" value="Search contact" 
        onClick="searchField()" />
        <input class="buttons" type="button" value="Show all contacts" 
      onClick="listContacts()" />
    <div hidden id="add">
        <p>
        First Name: <input class="add" type="text" id="firstName" value=""/>
        <br/>
        Last Name: <input class="add" type="text" id="lastName" value=""/><br/>
        Phone: <input type="text" id="phone" value=""/><br/>
        Mail: <input type="text" id="mail" value=""/><br/>
        <button type="button" onclick="addContacts()">Add Contact</button> </p>
    </div>

    <div hidden id="searching">
        <input type="text" id="searchword" placeholder="Enter a name" />
        <button type="button" onclick="searchContacts();">Search</button></p>
    </div>

    <div hidden id="listing">
        <p> Full Adressbook: <br/>
        <span id="person" ></span> <br/>
    </div>
    </body>
</html>

Answer 1

在您的打印方法中，当contacts[i].firstName未在该功能中定义并且您已经通过时，您会在i之类的表达式中引用要打印的内容在人物对象本身！

以下是更正版本的示例

function printPerson(person) {
    document.getElementById("person").innerHTML = ("Name: " + person.firstName);
}

注意：person.firstName代替contacts[i].firstName

另外请务必注意您的搜索区分大小写！

试图在javascript中为地址簿编写代码，但它不起作用

1 个答案: