JS |配列は入力からのデータを保存しません。溶液？

[OK]を1つの問題があります。配列は入力からのデータを保存しません。私が名前を保存したいとき、それはまだ空になり、何も出力できません。他の入力用のコードを書く前に、名前の入力を1つだけテストしてすべてが機能することを確認します。どんな助けや提案も感謝します。JS |配列は入力からのデータを保存しません。溶液？

$(document).ready(function() { 
 
    $('#newContact').on('click', function() { 
 
     $('#dataSection').slideToggle(); 
 
     $('#buttonSave').delay(400).fadeToggle(); 
 
    }); 
 
}); 
 

 

 
var contacts = []; 
 

 
function printPerson(person) { 
 
    console.log(person.firstName); 
 
}; 
 

 
var firstName = document.getElementById("firstName").value; 
 

 
function addFirstName(firstName) { 
 
    this.firstName = firstName; 
 
}; 
 

 
function saveContact() { 
 
    contacts[contacts.length] = new addFirstName(document.getElementById("firstName").value); 
 
    document.getElementById("output").innerHTML = contacts[0]; 
 
};

.input-group { 
 
    margin: 2px; 
 
    padding: 2px; 
 
} 
 

 
#newContact:hover { 
 
    cursor: pointer; 
 
} 
 

 
#dataSection, #buttonSave { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     
 
     <meta charset="utf-8"> 
 
     <title>AddressBookApp</title> 
 
     <link rel="stylesheet" type="text/css" href="addressbook.css"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <h2>AddressBook App</h2> 
 
     
 
     <hr class="my-4"> 
 
     
 
     <h5><span class="badge badge-secondary" id="newContact">New contact</span></h5> 
 
     
 
     <!-- Contact section --> 
 
     <div class="alert alert-success" role="alert" id="dataSection"> 
 
      
 
      <!-- Firstname Input --> 
 
      
 
      <div class="input-group"> 
 
       <span class="input-group-addon" id="basic-addon1">1</span> 
 
       <input type="text" class="form-control" placeholder="Type a first name" aria-label="Name" id="firstName"> 
 
      </div> 
 
      
 
      <!-- LastName Input --> 
 
      
 
      <div class="input-group"> 
 
       <span class="input-group-addon" id="basic-addon2">2</span> 
 
       <input type="text" class="form-control" placeholder="Type a last name" aria-label="Lastname" id="lastName"> 
 
      </div> 
 
      
 
      <!-- PhoneNumber Input --> 
 
      
 
      <div class="input-group"> 
 
       <span class="input-group-addon" id="basic-addon3">3</span> 
 
       <input type="text" class="form-control" placeholder="Type a number phone" aria-label="Number" id="phoneNumber"> 
 
      </div> 
 
      
 
      <!-- Email Input --> 
 
      
 
      <div class="input-group"> 
 
       <span class="input-group-addon" id="basic-addon4">4</span> 
 
       <input type="text" class="form-control" placeholder="Type an email"> 
 
      </div> 
 
      </div> 
 
     
 
     <!-- Button save provided contact --> 
 
     <button onclick="saveContact()" type="button" class="btn btn-info" id="buttonSave">Save</button> 
 
     
 
     <p id="output"></p> 
 
    </div> 
 

 
     
 
     
 
       
 
     <!-- Scripts --> 
 
       
 
     <!-- Jquery --> 
 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
     <!-- Bootstrap --> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     <!-- JS --> 
 
     <script type="text/javascript" src="addressbook.js"></script> 
 
     
 
    </body> 
 
</html>

出典

2017-10-17 Adam

'[0] .firstName' – Lixus

次試してみてください。

function addFirstName(firstName) { 
    this.firstName = firstName; 
    this.getValue = function() { 
     return this.firstName; 
    } 
}; 

function saveContact() { 
    contacts.push(new addFirstName(document.getElementById("firstName").value)); 
    document.getElementById("output").innerHTML = contacts[0].getValue(); 
};

問題がaddFirstNameインスタンス化していました。入力値をプロパティー（firstName）に入れます。そのため、何らかの方法でアクセスする必要があります（例： contacts[0].firstName。以上の一般的な変形であるので、あなたが将来的にいくつかの一般的なハンドラを構築することができますいくつかのgetterメソッドを介して：あなたはすべてのこと、新たなビジネスを行うと、何を持っている理由

contacts.forEach(contact => console.log(contact.getValue()))

出典

2017-10-17 17:55:46 dhilt

は、そのバージョンに簡単ではないです：'のdocument.getElementById（ "出力"）innerHTMLプロパティ=連絡先[0] .firstName'？ – Adam

これはあなたのニーズに応じて異なります。もしクラスがメソッドなどをしたいのであれば、他の方法で 'contacts.push（document.getElementById（" firstName "）。value）;'そして 'contacts [0]' – dhilt

あなたはそうです。私は今、この問題を抱えている他の入力を更新するとき。 – Adam

var contacts = []; 

function saveContact() { 
    contacts[contacts.length] = document.getElementById("firstName").value; 
    document.getElementById("output").innerHTML = contacts[0]; 
};

私はわかりませんよ、私はちょうどこれのように単純化するだろう。あなたが以前にやっていたやり方は、その中に 'firstName'という値を持つ新しいオブジェクトをプッシュすることでした。

あなたの例に複数のfirstNamesを保存し、それぞれのオブジェクトが本質的に「連絡先アイテム」であることを想定しているとすれば、これは意味があるかもしれません。連絡先は、[0] `オブジェクトであり、あなたはそれがプロパティ`連絡先のアクセスする必要が

var contacts = []; 

function printPerson(person) { 
    console.log(person.firstName); 
}; 

// I put lastName here as an example of adding other properties to it. 
function Contact(firstName, lastName) { 
    this.firstName = firstName; 
    this.lastName = lastName; 
}; 

function saveContact() { 
    var firstName = document.getElementById("firstName").value; 
    contacts.push(new Contact(firstName)); 
    document.getElementById("output").innerHTML = contacts[0].firstName; 
};

出典

2017-10-17 17:57:44

しかし、配列で私は検索オプションを作成し、検索したい名前を入力して、文字列だけでは不可能です。 – Adam

その場合、私はこの例題を少し微調整することができます。 –

JS |配列は入力からのデータを保存しません。溶液？

答えて

関連する問題