JS |数组不保存输入中的数据 |解决方案？

Question

好的，有一个问题。该数组不保存输入中的数据。当我想保存一个名字时，它仍然是空的，我不能输出任何东西。在为其他输入编写代码之前，我只测试名称的一个输入以确保一切正常。任何帮助和建议将不胜感激。

$(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>

Answer 1

尝试以下操作：

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()))

Answer 2

var contacts = [];

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

我不确定你为什么要做这些新业务，你有什么，我会像这样简化它。您之前的做法是推送一个新对象，其中包含值“firstName”。

假设您想在示例中存储多个名字，并且每个对象显示本质上是一个“联系人项目”，这可能更有意义。

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