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