JS | Le tableau ne sauvegarde pas les données de l'entrée

Ok, il y a un problème. Le tableau n'enregistre pas les données de l'entrée. Quand je veux enregistrer un nom, il semble toujours vide et je ne peux rien sortir. Je teste seulement une entrée pour le nom pour être sûr que tout fonctionne, avant que j'écrive un code pour d'autres entrées. Toute aide et suggestions seront appréciées.JS | Le tableau ne sauvegarde pas les données de l'entrée | Solution?

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

Source

2017-10-17 Adam

'contacts [0]' est un objet, vous devez accéder à ses contacts de propriétés [0] .firstName' – Lixus

Essayez suivante:

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

Le problème était dans addFirstName instanciation. Vous mettez la valeur d'entrée dans la propriété (firstName). Vous devez donc y accéder d'une manière ou d'une autre, par ex. . Ou par une méthode de lecture, ce qui est plus variante générique, vous serez en mesure de construire des gestionnaires généraux à l'avenir:

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

Source

2017-10-17 17:55:46 dhilt

est-ce pas la version plus simple:. 'Document.getElementById ("sortie") innerHTML = contacts [0] .firstName'? – Adam

Cela dépend de vos besoins, si vous voulez des classes, puis faire des méthodes etc, d'une autre manière il peut suffire juste 'contacts.push (document.getElementById (" firstName "). Value);' et ensuite 'contacts [0]' – dhilt

Vous avez raison. J'ai maintenant ce problème, lors de la mise à jour d'autres entrées .. – Adam

var contacts = []; 

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

Je ne suis pas sûr pourquoi vous faites tout ce que de nouvelles affaires et ce que vous avez , Je voudrais juste le simplifier comme ça. La façon dont vous le faisiez auparavant poussait un nouvel objet avec la valeur 'firstName' à l'intérieur.

En supposant que vous souhaitez stocker plusieurs firstNames dans votre exemple, et que chaque objet soit essentiellement un 'élément de contact', cela aura peut-être plus de sens.

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

Source

2017-10-17 17:57:44

Mais avec tableau, je peux ensuite faire une option de recherche, et tapez le nom que je veux trouver, et avec juste une chaîne, ce n'est pas possible. – Adam

Si c'est le cas, je peux donner un léger tweak à cet exemple. –

JS | Le tableau ne sauvegarde pas les données de l'entrée | Solution?

Répondre

Questions connexes