时间戳

首页 > 解决方案 > 我按下按钮后 HTML 页面显示 [object Object] 以显示结果

javascript - 我按下按钮后 HTML 页面显示 [object Object] 以显示结果

问题描述

我正在尝试一些东西来了解如何使用构造函数和对象。我想创建一个页面来使用Javascript中的构造函数和对象来显示来自文本字段的输入。当我单击保存时，它会在 HTML 页面上显示[object Object] 。我尝试了一些东西，但失败了。

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>

标签： javascripthtml

解决方案

您正在选择元素而不是值。更新为：

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

我曾经prototype.toString重写的toString()方法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>

推荐阅读