如何使用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

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

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

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

你可以尝试这样：

 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>