<body>
<div class="container">
<div class="form-group">
<label for="firstNameInput">Firstname:</label>
<input type="text" class="form-control" id="firstNameInput" name="firstNameInput">
<label for="lastNameInput">Lastname:</label>
<input type="text" class="form-control" id="lastNameInput" name="lastNameInput">
</div>
<button class="btn btn-info" onclick="showName()">Submit</button>
<p id="demo"></p>
</div>
<script type="text/javascript">
var person = {
firstName:document.getElementById('firstNameInput').value,
lastName:document.getElementById('lastNameInput').value,
fullName: function () {return this.firstNameInput + ", " + this.lastNameInput;}
};
function showName() {
document.getElementById('demo').innerHTML = person.fullName();
};
</script>
Pourquoi les valeurs d'entrée sont-elles incorrectes? // maintenant le résultat est ==> indéfini, indéfini S'il vous plaît, aidez-moi à trouver mon mauvais code!
3 réponses
Tout d'abord, le nom de variable que vous avez utilisé n'est pas correct
return this.firstNameInput + ", " + this.lastNameInput;
Ce n'est this.firstName pas this.firstNameInput
Suivant: si vous déclarez le person en dehors de la fonction, les firstName et lastName auront la valeur null puisque l'élément d'entrée n'a aucune valeur au chargement de la page.
Vous devez déclarer le person à l'intérieur de la fonction, de sorte que les valeurs dans les champs de saisie soient affectées à firstName et lastName lors du clic sur le bouton.
<body>
<div class="container">
<div class="form-group">
<label for="firstNameInput">Firstname:</label>
<input type="text" class="form-control" id="firstNameInput" name="firstNameInput">
<label for="lastNameInput">Lastname:</label>
<input type="text" class="form-control" id="lastNameInput" name="lastNameInput">
</div>
<button class="btn btn-info" onclick="showName()">Submit</button>
<p id="demo"></p>
</div>
<script type="text/javascript">
function showName() {
var person = {
firstName: document.getElementById('firstNameInput').value,
lastName: document.getElementById('lastNameInput').value,
fullName: function () {return this.firstName + ", " + this.lastName;}
};
document.getElementById('demo').innerHTML = person.fullName();
};
</script>Lorsque vous initialisez l'objet personnes, vous demandez directement la valeur des champs de saisie. Lorsque cela se produit, l'utilisateur n'a pas eu le temps d'insérer une valeur. Ce que vous devez faire, c'est demander la valeur dans votre fonction fullName. Voir cet exemple:
<div class="container">
<div class="form-group">
<label for="firstNameInput">Firstname:</label>
<input type="text" class="form-control" id="firstNameInput" name="firstNameInput">
<label for="lastNameInput">Lastname:</label>
<input type="text" class="form-control" id="lastNameInput" name="lastNameInput">
</div>
<button class="btn btn-info" onclick="showName()">Submit</button>
<p id="demo"></p>
</div>
<script type="text/javascript">
var person = {
firstNameElement: document.getElementById('firstNameInput'),
lastNameElement: document.getElementById('lastNameInput'),
fullName: function () {
return this.firstNameElement.value + ", " + this.lastNameElement.value;
}
};
function showName() {
document.getElementById('demo').innerHTML = person.fullName();
};
</script>
Je pense que var personne doit être déclarée dans la fonction ShowName si vous voulez obtenir la valeur d'entrée ements. Il y a probablement une façon plus propre de le faire ...