HTMLフォームの提出 - 入力を追加javascript配列現在の接触の作成に貼り付け接点</p> <p>を作成および編集することができますtypescriptです/ javascriptのアプリケーションを作成する

Question

gDayの

イムにバレス - 以下のコードをご覧ください。私はユーザー入力を検証する "createContact"という関数を作成しました。そして、有効な情報を "addContact"

//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> 

私は私の問題が何であるかを知ってみましょう！

は、それはyoureのHTML要素を渡すように見える

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... 
} 

ありがとうございます。

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であるあなたがこれを行うのいずれかのように、あなたの関数は、文字列を受け入れます実環境では...

あなたがその内容をリセットすることができDIV更新するには：

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

を今、あなただけのCに必要すべてのものは、createContactの最後に...