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 |数组不会保存来自输入|的数据解？

回答

相关问题