我想我的网站出了问题。我的目标是将位于HTML表单中的变量传递给本地存储，该存储将显示为表格。我编写了所有必需的代码，但不幸的是#add按钮不会注册JavaScript中链接到它的函数。
现在，这很奇怪，因为我的其他JavaScript函数正在按预期工作，并且是唯一似乎让我烦恼的事情。
我想传递的实体是
firstName
lastName
address
phoneNo
postCode
email
gender
我要求有人忽视我的工作并帮助我解决阻止这种情况发生的事情。
以下是我用来创建此网站的代码;
contactForm.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/styles.css">
</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="javascript/formType.js"></script>
<script type="text/javascript" src="javascript/contactForm.js"></script>
<title>Contact Form</title>
</head>
<body>
<h1>Add Contact to Book</h1>
<p>Enter your Contact's details (first name, last name, address etc.)</p>
<p>All details will be added to the table.</p>
<table>
<tr>
<td>First Name:</td><td><input type="text" id="firstname"/></td>
</tr>
<tr>
<td>Last Name</td><td><input type="text" id="lastname"/></td>
</tr>
<tr>
<td>Address:</td><td><input type="text" id="address"/></td>
</tr>
<tr>
<td>Phone No.:</td><td><input type="number" id="phoneno"/></td>
</tr>
<tr>
<td>Postcode:</td><td><input type="text" id="postcode"/></td>
</tr>
<tr>
<td>Email Address:</td><td><input type="email" id="emailaddress"/></td>
</tr>
<tr>
<td>Gender:</td><td><select name="gender" id="gender" onchange="getSelected(value)">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
</tr>
</table>
<button id="add">Add Contact to Book</button>
<button id="cancel">Cancel</button>
contactForm.js
/*global Contact, contacts, event, loadList, saveList $*/
/*jslint browser:true */
var firstNameField, lastNameField, addressField, phoneNoField, postCodeField, emailField, genderField;
var addContact = function (firstNField, lastNField, aDDField, phoneNField, postCField, eMField, gNDField) {
var c = new Contact(firstNField.value, lastNField.value, aDDField.value, phoneNField.value, postCField.value, eMField.value, gNDField.value);
contacts.push(c);
};
var clearUI = function () {
var white = '#fff';
firstNameField.value = "";
firstNameField.style.backgroundColor = white;
lastNameField.value = "";
lastNameField.style.backgroundColor = white;
addressField.value = "";
addressField.style.backgroundColor = white;
phoneNoField.value = "";
phoneNoField.style.backgroundColor = white;
postCodeField.value = "";
postCodeField.style.backgroundColor = white;
emailField.value = "";
emailField.style.backgroundColor = white;
genderField.value = "";
genderField.style.backgroundColor = white;
};
var addNew = function () {
addContact(firstNameField, lastNameField, addressField, phoneNoField, postCodeField, emailField, genderField);
clearUI();
};
var updateExisiting = function (index) {
contacts[index].firstName = firstNameField.value;
contacts[index].lastName = lastNameField.value;
contacts[index].address = addressField.value;
contacts[index].phoneNo = phoneNoField.value;
contacts[index].postCode = postCodeField.value;
contacts[index].email = emailField.value;
contacts[index].gender = genderField.value;
clearUI();
};
var cancel = function () {
clearUI();
};
var showContact = function (index) {
if (index > -1) {
firstNameField.value = contacts[index].firstName;
lastNameField.value = contacts[index].lastName;
addressField.value = contacts[index].address;
phoneNoField.value = contacts[index].phoneNo;
postCodeField.value = contacts[index].postCode;
emailField.value = contacts[index].email;
genderField.value = contacts[index].gender;
}
};
function addOrUpdate() {
addNew();
saveList();
alert ("You have successfully updated your Contact Book. You may now add others if you wish, or you can return to the other options.");
}
$(document).ready(function () {
loadList();
firstNameField = $("#firstname")[0];
lastNameField = $("#lastname")[0];
addressField = $("#address")[0];
phoneNoField = $("#phoneno")[0];
postCodeField = $("#postcode")[0];
emailField = $("#email")[0];
genderField = $("#gender")[0];
$("#add").click(addOrUpdate);
$("#cancel").click(cancel);
});
contactType.js
/*global localStorage, window */
var twoDigit = function (n) {
var str = n.toString();
if (str.length < 2) {
return '0' + str;
}
return str;
};
var Contact = function (firstName, lastName, address, phoneNo, postCode, email, gender){
this.firstName = firstName;
this.lastName = lastName;
this.address = address;
this.phoneNo = phoneNo;
this.postCode = postCode;
this.email = email;
this.gender = gender;
this.deleted = false;
};
Contact.prototype.toString = function () {
var s = this.firstName + '\n' + this.lastName + '\n' + this.address + '\n' + this.phoneNo + '\n' + this.postCode + '\n' + this.email + '\n' + this.gender+ '\n' + this.deleted + '\n';
if (this.deleted) {
s += "Delete\n\n";
} else {
s += "Don't Delete\n\n";
}
return s;
};
function buttonField(text, index, clickhandler) {
var btn = "<button id=" + index + " onclick=" + clickhandler + "(" + index + ")" + ">" + text + "</button>";
return btn;
}
function tableData(content) {
return "<td>" + content + "</td>";
}
function tableRow(clickhandler, index, tdElements) {
var element, tr = "<tr onclick='" + clickhandler + "(" + index + ")'>";
for (element in tdElements) {
tr += tdElements[element];
}
tr += "</tr>"
return tr;
}
function checkBox(index, clickhandler){
return "<input type = 'checkbox' onclick='" + clickhandler + "(" + index + ")'>";
}
Contact.prototype.tableRow = function (index) {
var tr, me, btnText;
me = this;
btnText = buttonField(this.postCode, index, "showPos");
tr = tableRow("selectContact", index, [tableData(this.firstName),
tableData(this.lastName),
tableData(this.address),
tableData(this.phoneNo),
tableData(btnText),
tableData(this.gender),
tableData(checkBox(index, "updateStatus"))]);
return tr;
};
var contacts = [];
var addContact = function (firstNField, lastNField, aDDField, phoneNField, postCField, eMField, gNDField) {
var c = new Contact(firstNField.value, lastNField.value, aDDField.value, phoneNField.value, postCField.value, eMField.value, gNDField.value);
contacts.push(c);
};
var saveList = function () {
var conts = JSON.stringify(contacts);
if (conts !== "") {
localStorage.contacts = conts;
} else {
window.alert("The contact could not be saved to the list. Please try again later.")
}
};
var loadList = function () {
var conts = "", i, cont, proto;
if (localStorage.contacts !== undefined) {
conts = localStorage.contacts;
contacts = JSON.parse(conts);
proto = new Contact();
for (i = 0; i < contacts.length; i += 1) {
cont = contacts[i];
cont.__proto__ = proto;
}
}
};