pourquoi les valeurs d'entrée sont-elles incorrectes?

Question

<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!

javascript html

0

Ashkan Rezaei 9 mars 2016 à 19:01

Answer 1

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>

2

Munawir 9 mars 2016 à 16:18

Answer 2

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>

0

Peter Goes 9 mars 2016 à 16:17

Answer 3

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 ...

0

Devernay Stéphane 9 mars 2016 à 16:24

pourquoi les valeurs d'entrée sont-elles incorrectes?

3 réponses

Questions connexes

De nouvelles questions

javascript