如何使用document.write获取div标签中javascript对象的输出？

Question

JavaScript页面：

我创建了javascript函数，在其中有一个名为Passenger的对象，它有三个值，即name =“A”，age = 30，reservationStatus = true。现在我想使用document.write在这三个相应的div中打印这些值

HTML页面：

我创建了三个div标签，其中id =“name”，id =“age”，id =“reservationStatus”和一个具有javascript函数onclick事件的按钮。

预期成绩：

姓名：A年龄：30岁保留状态：真实

Answer 1

你可以尝试这样：

window.onload = () => {

  const passenger = {
    name: 'A',
    age: 30,
    reservationStatus: true
  };

  const nameElement = document.querySelector('#name');
  const ageElement = document.querySelector('#age');
  const reservationStatusElement = document.querySelector('#reservationStatus');
  const btnShowPassengerElement = document.querySelector('#btnShowPassenger');

  // Hiding on window onload
  nameElement.innerHTML = '';
  ageElement.innerHTML = '';
  reservationStatusElement.innerHTML = '';

  btnShowPassengerElement.addEventListener('click', (event) => {

    // Showing them on click of the button
    nameElement.innerHTML = passenger.name;
    ageElement.innerHTML = passenger.age;
    reservationStatusElement.innerHTML = passenger.reservationStatus;
  });

};

group {
  display: inline-block;
  margin: 10px;
}

<button id="btnShowPassenger">Show Passenger Details </button>

<div>
  <div class="group">
    <div> Name: </div>
  </div>
  <div class="group">
    <div id="name"></div>
  </div>
</div>

<div>
  <div class="group">
    <div> Age: </div>
  </div>
  <div class="group">
    <div id="age"></div>
  </div>
</div>

<div>
  <div class="group">
    <div> Reservation Status: </div>
  </div>
  <div class="group">
    <div id="reservationStatus"></div>
  </div>
</div>

Answer 2

const passenger = {
  name: 'A',
  age: 30,
  reservationStatus: true,
};

const button = document.querySelector('button');

const showInfo = () => {
  document.querySelector('#name').textContent = `Name: ${passenger.name}`;
  document.querySelector('#age').textContent = `Age: ${passenger.age}`;
  document.querySelector('#reservationStatus').textContent = `Reservation status: ${passenger.reservationStatus}`;
};

button.addEventListener('click', showInfo);

<button>Show</button>
<div id="name"></div>
<div id="age"></div>
<div id="reservationStatus"></div>

Answer 3

使用document.getElementById（）来标识具有id（如div）的元素，并为其设置值

document.getElementById("name").innerHTML =Passenger.name;
document.getElementById("age").innerHTML =Passenger.age;
document.getElementById("reservationStatus").innerHTML =Passenger.reservationStatus;