JS |數組不會保存來自輸入|的數據解？

好的，有一個問題。該數組不保存來自輸入的數據。當我想保存一個名字時，它仍然是空的，我不能輸出任何東西。在我爲其他輸入編寫代碼之前，我只測試一個名稱輸入以確保一切正常。任何幫助和建議將不勝感激。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]'是一個對象，你要訪問它的屬性'聯繫人[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，並且每個對象顯示本質上是一個「聯繫人項目」，也許這會更有意義。

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 |數組不會保存來自輸入|的數據解？

回答

相關問題