試圖在JavaScript中編寫地址簿的代碼，但它不起作用

我正在嘗試使用Javascript，HTML編寫地址簿 - 但我找不到該錯誤的原因。我是一個真正的初學者，所以如果有人能夠幫助我，我會理解這個問題。試圖在JavaScript中編寫地址簿的代碼，但它不起作用

這裏是JS代碼，我創建了3個對象並將其保存在一個數組中。我應該嘗試打造「搜索」，「添加」和「全部顯示」，但目前它doesn't反正工作...

var p1 = { 
    firstName: "John", 
    lastName: "Doe", 
    phone: "(0043) 650 111-1111", 
    mail: "[email protected]" 
}; 

var p2 = { 
    firstName: "Jane", 
    lastName: "Doe", 
    phone: "(0043) 650 222-2222", 
    mail: "[email protected]" 
}; 

var p3 = { 
    firstName: "August", 
    lastName: "July", 
    phone: "(0043) 650 333-3333", 
    mail: "[email protected]" 
}; 
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 - it's我的拳頭時間來寫一個完整的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>

來源

2017-10-12 kissy1189

您可以定義「*不起作用*」嗎？什麼是預期的功能，以及當前功能如何不同？ –

問題是網站上顯示的缺少搜索結果，它並沒有顯示列表中的每個人 - 只是第一個，我試圖找到解決方案，但在這種情況下循環不是循環 – kissy1189

它看起來像在您的打印方法如果引用做什麼用像contacts[i].firstName表達式打印時i沒有在函數定義和你已經傳入了人物本身！

這裏有一個修正版本通知

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

爲例：contacts[i].firstName

person.firstName代替此外，一定要注意你的搜索是區分大小寫的！

來源

2017-10-12 03:19:18

試圖在JavaScript中編寫地址簿的代碼，但它不起作用

回答

相關問題