javascript - 如何在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.id

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, '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 

button.onclick = function() {
  if (input.value === 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>

为了获得正确的日期，正如您在评论中提到的那样，您可以更改格式，

'DD-MM-YYYY'
19-02-2001

至

'YYYY-MM-DD'
2001-02-19