Тумблер с JS - PullRequest
Новая
       13

Тумблер с JS

0 голосов
/ 13 октября 2019

Я пытаюсь выучить JS и хотел бы узнать, может ли кто-нибудь помочь мне, пожалуйста.

Я бы хотел, чтобы в админке приборной панели был элемент управления с тумблером для отображения наиндекс сайта, независимо от того, является ли сервис онлайн или оффлайн. Когда включено, поместите «онлайн» текст в зеленый тег. А когда не работает "оффлайн" с красной меткой. Как я могу это сделать? С прослушивателем событий? Спасибо!

Пример

1 Ответ

0 голосов
/ 13 октября 2019

Вот простой пример, чтобы показать вам подход. 

document.getElementById(`status`).addEventListener(`click`, function(){
  const classes = this.classList;
  if (classes.contains(`offline`)) {
    this.textContent = `Online`;
    classes.remove(`offline`);
    classes.add(`online`);
  } else if (classes.contains(`online`)) {
    this.textContent = `Offline`;
    classes.remove(`online`);
    classes.add(`offline`);
  }
});
#status {
  color: white;
}

.online {
  background: green;
}

.offline {
  background: red;
}
<span id='status' class='offline'>Offline</span>
...