Question

g·天

我正在创建一个可以创建和编辑联系人的javascript /打字稿应用程序

目前仍在创建联系人 - 请查看下面的代码。我创建了一个名为＆＃34; createContact＆＃34;的函数。这将验证用户输入。然后将有效信息传递给＆＃34; addContact＆＃34;

//mock data to fill array
let peter = {
    firstName: "Peter",
    lastName: "Best",
    companyName: "Industrie Clothing",
    phoneNumber: "0435 000 000",
    email: "email@email.com",
    postalAddress: "7 Myco Court"
};

//storing the mock data in an array
let contacts = [peter];

// sending to the console - troubleshooting
function printPerson(person):void {
        let li = document.createElement("li");
        let node = document.createTextNode(person.firstName+" "+person.lastName +" "+ person.phoneNumber);
        li.appendChild(node); 
        let elt = document.getElementById("contactList");
        elt.appendChild(li);
     }

//this function is used to loop through ALL contacts
function list():void{
    var contactsLength = contacts.length;
    for (var i = 0; i < contactsLength; i++) {
        printPerson(contacts[i]);
    }
}

// function to "add" a contact into the contacts array
function addContact(firstName: string, lastName: string, companyName: string, email: string, phoneNumber: string, postalAddress: string):void{
   let object = {
        firstName: firstName,
        lastName: lastName,
        companyName: companyName,
        email: email, 
        phoneNumber: phoneNumber,
        postalAddress: postalAddress
    };
    contacts[contacts.length] = object;
};

function createContact():void{
    let firstName = <HTMLInputElement>document.getElementById("firstName");
    let surname = <HTMLInputElement>document.getElementById("surname");
    let phoneNumber = <HTMLInputElement>document.getElementById("phoneNumber");
    let email = <HTMLInputElement>document.getElementById("email");
    let companyName = <HTMLInputElement>document.getElementById("companyName");
    let postalAddress = <HTMLInputElement>document.getElementById("postalAddress");

    if((email.value == "") || (phoneNumber.value == "")){
        alert("Please Provide Either An Email or Phone Number");
    }
    else {
        alert("ALL GOOD");
        addContact(firstName, surname, phoneNumber, companyName, email, postalAddress);
    }

}

addContact("tim", "tom", "google", "timtom@example.com", "0436 139 648", "home is where the heart is");
//displaying contacts
list();

HTML

<div class="content">
                <div id="createContact">
                        First name:<br>
                        <input type="text" id="firstName" name="firstName">
                        <br>
                        Last name:<br>
                        <input type="text" id="lastName" name="lastName" required>
                        <br>
                        Company Name:<br>
                        <input type="text" id="companyName" name="companyName">
                        <br>
                        Email:<br>
                        <input type="email" id="email" name="email">
                        <br>
                        Phone Number:<br>
                        <input type="text" id="phoneNumber" name="phoneNumber">
                        <br>
                        Postal Address:<br>
                        <input type="text" id="postalAddress" name="postalAddress">
                        <br><br>
                        <button onClick = "createContact()">Submit</button>
                </div>
            </div>

让我知道我的问题是什么！

谢谢

Answer 1

function createContact():void{
let firstName = <HTMLInputElement>document.getElementById("firstName");//HTML Element
let surname = <HTMLInputElement>document.getElementById("surname");
let phoneNumber = <HTMLInputElement>document.getElementById("phoneNumber");
let email = <HTMLInputElement>document.getElementById("email");
let companyName = <HTMLInputElement>document.getElementById("companyName");
let postalAddress = <HTMLInputElement>document.getElementById("postalAddress");

if((email.value == "") || (phoneNumber.value == "")){
    alert("Please Provide Either An Email or Phone Number");
}
else {
    alert("ALL GOOD");
    addContact(firstName, surname, phoneNumber, companyName, email, postalAddress);//youre passing HTML Elements...
}

看起来你传递了html Elements。你的函数接受字符串，所以你要么这样做：

addContact(firstName.value, surname.value, phoneNumber.value, companyName.value, email.value, postalAddress.value)

或者你让你的代码更短：

function createContact():void{
var values=["firstName","surname","phoneNumber","email","companyName","postalAdress"].map(el=>document.getElementById(el).value);
if(values[3]=="" || values[2]==""){
 return alert("please provide Email and PhoneNumber");
}
addContact(...values);
}

注意：这是ES6，因此您可以使用Babel等在真实环境中使用...

要刷新div，您可以重置其内容：

function list():void{
document.getElementById("contactList").innerHTML="";//reset
var contactsLength = contacts.length;
   for (var i = 0; i < contactsLength; i++) {
    printPerson(contacts[i]);
   }
}

现在你只需要在createContact ...

的末尾调用它

HTML表单提交 - 将输入值添加到javascript数组

1 个答案: