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

【问题标题】：How to show property of person object on html div tag?如何在 html div 标签上显示人对象的属性？
【发布时间】：2020-03-25 09:10:40
【问题描述】：

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 语句。请帮我解决这个问题。

【问题讨论】：

你的意思是这样的？？ codepen.io/Maniraj_Murugan/pen/rNVqRJe
是的！有用！你改变了什么？
我已在 if 语句中将 input 更改为 input.value。如果可行，我应该将其发布为答案吗？你能验证一下吗？？
是的，它正在工作。谢谢！但是 dob 显示无效。也有解决办法吗？
将检查并发布..

标签： javascript html css oop object

【解决方案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>

要获得正确的日期，就像您在 cmets 中提到的那样，您可以更改格式，

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

到

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

【讨论】：

【解决方案2】：

您需要使用对象检查输入值（而不是输入本身）。所以将你的 button.onclick 函数更改为这将解决你的问题：

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.value === 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);
  }
}

【讨论】：