Как я могу получить выходные данные объекта javascript в теге div, используя document.write? - PullRequest
Новая
       27

Как я могу получить выходные данные объекта javascript в теге div, используя document.write?

0 голосов
/ 23 марта 2019

Страница JavaScript:

Я создал функцию javascript, и внутри нее есть один объект с именем Passenger, который имеет три значения: name = "A", age = 30 ,servationStatus = true.Теперь я хочу напечатать эти значения внутри этих трех соответствующих div, используя document.write

HTML-страницу:

Я создал три тега div с id = "name", id = "age",id = "servationStatus »и одна кнопка, которая имеет событие onclick функции javascript.

Ожидаемые результаты:

Имя: A Возраст: 30 Статус резервации: true

Ответы [ 3 ]

0 голосов
/ 23 марта 2019 

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>
0 голосов
/ 23 марта 2019

Вы можете попробовать вот так: 

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>
0 голосов
/ 23 марта 2019

Используйте document.getElementById (), чтобы идентифицировать элемент с идентификатором (например, div) и установить для него значение как 

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