1

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>

Improve this question
2
  • That solution didn't work for me. Commented Mar 16, 2019 at 15:30
  • You have a Persons constructor that expects to be passed name, age. Why don't you use it? Commented Mar 16, 2019 at 16:06

2 Answers 2

Reset to default
3

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>

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

1 Comment

This should be the selected answer.
0

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>

Improve this answer

5 Comments

why the downvote ?
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
I'm Sorry I Specified it explicitly .... But I commented on the code whats the change
I understood the answer, it was in the code. Thank you very much!
Code-only answers are almost never good answers, correct or not.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.