Занесение html элемента в объект JS

Рейтинг: 0Ответов: 1Опубликовано: 04.08.2023

Хотел создать универсальный объект для управления всплывающего окна. Проблема в том что js не отображает это окно: Пример кода на HTML:

<div id="notification">
  <div class="modal">  
    <span class="close">🞨</span>  
    <p>Уведомление</p>
    <button id="Accept">OK</button>
  </div>
</div>

Пример кода на JS:

var noti = {
  modal : document.getElementById(notification),
  btnAccept : document.getElementById("Accept"),
  span : document.getElementsByClassName("close")[0]
  };
noti.modal.style.display = "block";//при попытке вывести значение в alert выдает пустую строку

В дальнейшем хотел подвязать на объект события по нажатию на кнопку:

noti.btnAccept.onclick =  CloseNotificationWindow();
noti.span.onclick = CloseNotificationWindow();

Хотелось бы узнать можно ли как-то управлять окнами таким способом через объект?

javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Собственно, вот:

var noti = {
  modal : document.getElementById('notification'),
  btnAccept : document.getElementById("Accept"),
  span : document.getElementsByClassName("close")[0]
  };
noti.modal.style.display = "block";

function CloseNotificationWindow() {
  noti.modal.style.display = "none";
}

noti.btnAccept.addEventListener('click', CloseNotificationWindow);
noti.span.addEventListener('click', CloseNotificationWindow);
#notification {
  display: none;
}
<div id="notification">
  <div class="modal">  
    <span class="close">🞨</span>  
    <p>Уведомление</p>
    <button id="Accept">OK</button>
  </div>
</div>