CODEWITHSUNDEEP
javascripthtml
Ashkan Rezaei
Ashkan Rezaei

Reputation: 13

why are input values show incorrect?

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

why are input values show incorrect? //now result are ==> undefined, undefined Please help me to find my wrong code!

Upvotes: 0

Views: 62

Answers (3)

Devernay St&#233;phane
Devernay St&#233;phane

Reputation: 141

I think var person should be declared inside the ShowName function if you want to get the ements input value. There' s probably a cleaner way of doing that...

Upvotes: 0

Munawir
Munawir

Reputation: 3356

First of all the variable name you used is not correct

return this.firstNameInput + ", " + this.lastNameInput;

It is this.firstName not this.firstNameInput

Next : if you declare the person outside the function, the firstName and lastName will have null value since the input element have no value on page load.

You have to declare the person inside the function, so that the values in input fields are assigned to firstName and lastName on button click.

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

Upvotes: 2

Peter Goes
Peter Goes

Reputation: 499

When you initialize the persons object, you directly ask for the value of the input fields. When this happens, the user did not have the time to insert a value. What you should do is ask for the value in your fullName function. See this example:

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

Upvotes: 0

Related Questions