HTML page shows [object Object] after I pressed the button instead to show the results

Question

I was trying out some things to learn about how to work with constructors and objects. I wanted to create a page to show the input from the textfields using constructors and objects in Javascript. When I click on save it shows [object Object] on the HTML page. I tried some things but that failed.

function Persons(name, age){
    this.name   = name;
    this.age = age;
}

var button  = document.querySelector('#save');

  

function showPerson4(){
    var name   = document.querySelector("#name");
    var age = document.querySelector("#age");

    var person4    = new Persons();
    person4.name  = name;
    person4.age = age;

    document.querySelector("#person4").innerHTML = person4;


}

button.addEventListener("click", function (ev) {
    ev.preventDefault();
    showPerson4();
},false);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show person</title>
</head>
<body>


    Name: <input type="text" id="name" name="name" placeholder="Enter your name"><br>
    Age: <input type="text" id="age" name="age" placeholder="Enter your age">
    <button id="save" name="save">Save</button>
    <p id="person4" class="person4"></p>

<script src="js/opdracht1.js"></script>
</body>
</html>

You have a `Persons` constructor that expects to be passed `name, age`. Why don't you use it? — connexo, Mar 16 '19 at 16:06

haldo · Accepted Answer · 2019-04-09T00:31:19.783

You are selecting the element but not the value. Update to:

var name = document.querySelector("#name").value;
var age = document.querySelector("#age").value;

I've used prototype.toString to override the toString() method of the Persons

function Persons(name, age){
    this.name = name;
    this.age = age;        
}

// override the persons.toString
Persons.prototype.toString = function personToString()
{
    return 'Name: ' + this.name + ', Age: ' + this.age;
}

var button = document.querySelector('#save');  

function showPerson4(){
    var name = document.querySelector("#name").value;
    var age = document.querySelector("#age").value;

    var person4 = new Persons(name, age);
                                                   // call toString()
    document.querySelector("#person4").innerHTML = person4.toString();
}

button.addEventListener("click", function (ev) {
    ev.preventDefault();
    showPerson4();
},false);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show person</title>
</head>
<body>
    Name: <input type="text" id="name" name="name" placeholder="Enter your name"><br>
    Age: <input type="text" id="age" name="age" placeholder="Enter your age">
    <button id="save" name="save">Save</button>
    <p id="person4" class="person4"></p>

<script src="js/opdracht1.js"></script>
</body>
</html>

This should be the selected answer. – connexo Mar 16 '19 at 16:05 — connexo, Mar 16 '19 at 16:05

Serene Abraham Mathew · Answer 2 · 2019-03-16T17:49:50.743

You just made two mistakes

1) You assigned the variables name and age the input controls itself not their values

 var name   = document.querySelector("#name").value;
 var age = document.querySelector("#age").value;

2) To display Javascript object in html you have to convert it to string JSON.stringify() will do the trick

function Persons(name, age){
    this.name   = name;
    this.age = age;
}

var button  = document.querySelector('#save');

  

function showPerson4(){

    //get the value from inputs
    var name   = document.querySelector("#name").value;
    var age = document.querySelector("#age").value;

    var person4    = new Persons();
    person4.name  = name;
    person4.age = age;

//Stringify results for viewing object in html
    document.querySelector("#person4").innerHTML = JSON.stringify(person4);


}

button.addEventListener("click", function (ev) {
    ev.preventDefault();
    showPerson4();
},false);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show person</title>
</head>
<body>


    Name: <input type="text" id="name" name="name" placeholder="Enter your name"><br>
    Age: <input type="text" id="age" name="age" placeholder="Enter your age">
    <button id="save" name="save">Save</button>
    <p id="person4" class="person4"></p>

<script src="js/opdracht1.js"></script>
</body>
</html>

i haven’t, but I guess it’s because you haven’t spent any words on what OP did wrong and why your version worked — Davide Vitali, Mar 16 '19 at 15:24
I'm Sorry I Specified it explicitly .... But I commented on the code whats the change — Serene Abraham Mathew, Mar 16 '19 at 15:26
I understood the answer, it was in the code. Thank you very much! — Rico Papillon, Mar 16 '19 at 15:30
Code-only answers are almost never good answers, correct or not. — connexo, Mar 16 '19 at 16:03

HTML page shows [object Object] after I pressed the button instead to show the results

2 Answers2

Linked