如何在html div标签上显示person对象的属性？

Question

function person(name, age, dob, gender, id) {

  this.name = name;

  this.age = age;

  this.dob = new Date(dob);

  this.gender = gender;

  this.id = id;

}

// Declaring Variables.

let person1 = new person('John Doe', 19, '19-02-2001', 'male', '001');

let person2 = new person('Jane Doe', 19, '22-02-2001', 'female', '002');

let input = document.getElementById('text');

let show = document.getElementById('result');

let button = document.getElementById('button');

// creating function to run code 

button.onclick = function() {

  if (input === person1.id) {

    show.innerHTML = `Name : ${person1.name} <br> Age : ${person1.age} <br> DOB : ${person1.dob} <br> Gender : ${person1.gender}`;

  } else if (input === person2.id) {

    show.innerHTML = `Name : ${person2.name} <br> Age : ${person2.age} <br> DOB : ${person2.dob} <br> Gender : ${person2.gender}`;

  } else {

    show.innerHTML = 'Software Crashed!';

    console.log(input.value);

    console.log(person1.id);

  }

}

body {

  padding: 0px;

  margin: 0;

}

#clear {

  padding-top: 50px;

}

#input {

  padding: 10px;

  margin: auto;

  border: 2px solid black;

  width: 60%;

}

#text {

  padding: 5px;

  width: 70%;

}

#button {

  padding: 7px;

  border: none;

  color: white;

  background: black;

}

#result {

  background: #f1f1f1;

  padding: 12px;

  width: 60%;

  margin: auto;

  font-size: 22px;

}

<div id="clear">

</div>

<div id="input">

  <input type="text" placeholder="Enter Name For Details" id="text" required>

  <button id="button">Submit</button>

</div>

<br>

<br>

<div id="result">

</div>

我试图在名为 result 的 html div 标签上打印该人的属性，但它显示软件崩溃了，因为我在 JavaScript 中放入了 else 语句。在控制台记录中，输入 id 与 person.id 匹配，但仍然只显示 else 语句。请帮我解决这个问题。

Answer 1

在该行中，if (input === person1.id) { .. } 您尝试将输入元素与 id 进行比较，而不是与输入的值进行比较。因此改变input === person1.id到input.value === person1.idfunction person(name, age, dob, gender, id) {&nbsp; this.name = name;&nbsp; this.age = age;&nbsp; this.dob = new Date(dob);&nbsp; this.gender = gender;&nbsp; this.id = id;}// Declaring Variables.let person1 = new person('John Doe', 19, '2001-02-19', 'male', '001');let person2 = new person('Jane Doe', 19, '2001-02-22', 'female', '002');let input = document.getElementById('text');let show = document.getElementById('result');let button = document.getElementById('button');// creating function to run code&nbsp;button.onclick = function() {&nbsp; if (input.value === person1.id) {&nbsp; &nbsp; show.innerHTML = `Name : ${person1.name} <br> Age : ${person1.age} <br> DOB : ${person1.dob} <br> Gender : ${person1.gender}`;&nbsp; } else if (input === person2.id) {&nbsp; &nbsp; show.innerHTML = `Name : ${person2.name} <br> Age : ${person2.age} <br> DOB : ${person2.dob} <br> Gender : ${person2.gender}`;&nbsp; } else {&nbsp; &nbsp; show.innerHTML = 'Software Crashed!';&nbsp; &nbsp; console.log(input.value);&nbsp; &nbsp; console.log(person1.id);&nbsp; }}body {&nbsp; padding: 0px;&nbsp; margin: 0;}#clear {&nbsp; padding-top: 50px;}#input {&nbsp; padding: 10px;&nbsp; margin: auto;&nbsp; border: 2px solid black;&nbsp; width: 60%;}#text {&nbsp; padding: 5px;&nbsp; width: 70%;}#button {&nbsp; padding: 7px;&nbsp; border: none;&nbsp; color: white;&nbsp; background: black;}#result {&nbsp; background: #f1f1f1;&nbsp; padding: 12px;&nbsp; width: 60%;&nbsp; margin: auto;&nbsp; font-size: 22px;}<div id="clear"></div><div id="input">&nbsp; <input type="text" placeholder="Enter Name For Details" id="text" required>&nbsp; <button id="button">Submit</button></div><br><br><div id="result"></div>为了获得正确的日期，正如您在评论中提到的那样，您可以更改格式，'DD-MM-YYYY'19-02-2001到'YYYY-MM-DD'2001-02-19

Answer 2

您需要使用对象检查输入值（而不是输入本身）。因此，将您的button.onclick函数更改为这将解决您的问题：button.onclick = function() {&nbsp; if (input.value === person1.id) {&nbsp; &nbsp; show.innerHTML = `Name : ${person1.name} <br> Age : ${person1.age} <br> DOB : ${person1.dob} <br> Gender : ${person1.gender}`;&nbsp; } else if (input.value === person2.id) {&nbsp; &nbsp; show.innerHTML = `Name : ${person2.name} <br> Age : ${person2.age} <br> DOB : ${person2.dob} <br> Gender : ${person2.gender}`;&nbsp; } else {&nbsp; &nbsp; show.innerHTML = 'Software Crashed!';&nbsp; &nbsp; console.log(input.value);&nbsp; &nbsp; console.log(person1.id);&nbsp; }}