Object giving null values even after giving values

Question

window.onload = function() {

  var Employee = function(name, bd) {
    this.name = name;
    this.bd = bd;
    this.age = function() {
      2017 - this.bd;
    }
  }

  var empName = document.getElementById("name").value;
  var empBday = document.getElementById("bday").value;

  var empList = new Employee(empName, empBday);

  var Btn = document.getElementById('add').addEventListener('click', function() {
    console.log(empList);
  });
}

<input type="text" id="name" value=""></input>
<input type="text" id="bday" value=""></input>
<button id="add">Add</button>

Well even after i input some values i then Console.log the object called "emplist" but i only get Employee {name: "", bd: "", age: ƒ}

When the window loads, the values of the inputs are just empty strings, so that's what you get. Did you expect something else ? — adeneo
– adeneo, Commented Aug 25, 2017 at 11:45
You set the values on window.onload. You have to update them upon changes in the inputs developer.mozilla.org/fi/docs/Web/Events/change They are empty when the page is loaded. — MrGoofus
– MrGoofus, Commented Aug 25, 2017 at 11:46

Yuval Ben-Arie · Accepted Answer · 2017-08-25 11:48:20Z

5

Create the object only after the button is clicked:

var Employee = function(name, bd) {
    this.name = name;
    this.bd = bd;
    this.age = function() {
        2017 - this.bd;
    }
}

window.onload = function () {
    document.getElementById('add').addEventListener('click', function(){
        var empName = document.getElementById("name").value;
        var empBday = document.getElementById("bday").value;

        var empList = new Employee(empName, empBday);
        console.log(empList);
    });
}

answered Aug 25, 2017 at 11:48

Yuval Ben-Arie

1,2909 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar V · Accepted Answer · 2017-08-25 11:46:56Z

You're assigning values to the object in window onload. So empty values are assigned because your input elements have empty values in default

Change it to

window.onload = function () {


var Btn = document.getElementById('add').addEventListener('click', function(){
    var Employee = function(name, bd){
    this.name = name;
    this.bd = bd;
    this.age = function(){
        2017 - this.bd;
    }
}

var empName = document.getElementById("name").value;
var empBday = document.getElementById("bday").value;

var empList = new Employee(empName, empBday);
console.log(empList);
});
}

<html>
    <head>
        <title>Employee Details</title>
        <script src="script.js"></script>
    </head>
    <body>
        <input type="text" id="name" value=""></input>
        <input type="text" id="bday" value=""></input>
        <button id="add">Add</button>
    </body>
</html>

KolaCaine · Accepted Answer · 2017-08-25 11:50:21Z

-1

You need to add handler change event like this :

window.onchange = function () {

var Employee = function(name, bd){
    this.name = name.value;
    this.bd = bd.value;
    this.age = function(){
        2017 - this.bd;
    }
}

var empName = document.getElementById("name")
var empBday = document.getElementById("bday")

var empList = new Employee(empName, empBday);

var Btn = document.getElementById('add').addEventListener('click', function(){
    console.log(empList);
});
}

<html>
    <head>
        <title>Employee Details</title>
        <script src="script.js"></script>
    </head>
    <body>
        <input type="text" id="name"></input>
        <input type="text" id="bday"></input>
        <button id="add">Add</button>
    </body>
</html>

answered Aug 25, 2017 at 11:50

KolaCaine

2,1855 gold badges22 silver badges35 bronze badges

1 Comment

Nope Over a year ago

windows.onchange is way too global and will go ham on your browser as it's triggered for many reasons. Worst it multiplies the click bindings in your example duplicating all output the more you "change". If all you need is values when clicking on an element and then localize it to that. Always try to use the most specific not most global selector.

Collectives™ on Stack Overflow

Object giving null values even after giving values

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related