Как показать свойство объекта person в теге html div?

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>

Я пытаюсь напечатать свойство человека в теге html div, названном как результат, но он показывает, что программное обеспечение зависло, как и я вставьте оператор else в javascript. При входе в консоль оба идентификатора ввода совпадают с person.id, но все равно показывает только оператор else. Пожалуйста, помогите мне с этой проблемой.

Answer 1

В строке if (input === person1.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

Answer 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);
  }
}