0
私はJavascript、HTMLでアドレス帳を書こうとしていますが、なぜそれがうまくいかないのかを知ることはできません。私は本当に初心者なので、もし誰かが私がこの問題を理解するのを助けることができれば、非常に親切になるでしょう。javascriptでアドレス帳のコードを書こうとしましたが動作しません
JSコードでは、3つのオブジェクトを作成して配列に保存しました。 - 私が正しくJSでinnerHTMLプロパティを使用してわからない：私は私のHTML
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]);
};
};
};
...「追加」、「検索」を作成しようと、「すべて表示」が、現在それはdoesn'tとにかく動作するはずです -/JS完全なHTMLを書くために私の拳の時間をit's
それはあなたがiがその関数で定義されていない場合
contacts[i].firstNameような表現で印刷し、あなたに何を参照しているあなたの印刷方法でのように見える
<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>
「*動作しません」と定義してください。意図した機能とは何ですか？また、現在の機能はどのように異なりますか？ –
問題はサイトに表示されていない検索結果の中にリストにあるすべての人物を表示していないことです - 最初のものだけを探して解決策を見つけようとしましたが、その場合ループはループしていません – kissy1189