Дисплей открыт или закрыт в рабочие часы с использованием троичного оператора - PullRequest
Новая
       5

Дисплей открыт или закрыт в рабочие часы с использованием троичного оператора

0 голосов
/ 07 января 2019

Я просто пытаюсь отобразить «открытый» или «закрытый» текст внутри элемента с именем класса open, если время находится между a и b.

Я попробовал следующее, но на элементе .open ничего не отображается. Что не так с этим кодом? 

const hours = new Date().getHours()
const openHours = (hours >= 8 && hours < 17) ? 'Open' : 'Closed'
document.getElementsByClassName('open').innerHTML = openHours

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Функция getElementsByClassName возвращает несколько элементов. Классы предназначены для применения к нескольким объектам. Один из вариантов решения этой проблемы - получить первый элемент в массиве.

Вот пример этого: 

var elements = document.getElementsByClassName('open');
elements[0].innerHTML = openHours

(Сокращенная версия этого будет использовать querySelector, хотя имейте в виду, что querySelector намного медленнее, чем встроенные функции DOM - и он не поддерживается в ранних версиях IE или FireFox.)

Циклический просмотр каждого из элементов в классах также является другим вариантом: 

var elements= document.getElementsByClassName("open");
for(var i = 0; i < elements.length; i++)
{
   elements[i].innerHTML = openHours
}

В противном случае (что я бы порекомендовал, поскольку вам нужен только один объект), дается объекту идентификатор вместо класса. 

<div id="openStatus"></div>
document.getElementById('openStatus');
0 голосов
/ 07 января 2019

Если на вашей странице есть только один элемент с именем класса open, просто используйте вместо него querySelector(), например: 

const hours = new Date().getHours()
const openHours = (hours >= 8 && hours < 17) ? 'Open' : 'Closed'
document.querySelector('.open').innerHTML = openHours
<p class="open"></p>

Но если существует более одного элемента с именем класса open, в который вы хотите вставить троичный результат, вы можете извлечь все элементы, используя querySelectorAll(), а затем использовать forEach() чтобы получить доступ к каждому элементу так: 

    const hours = new Date().getHours()
    const openHours = (hours >= 8 && hours < 17) ? 'Open' : 'Closed'
    document.querySelectorAll('.open').forEach(x => {
        x.innerHTML = openHours
        // here, x is every div with the `open` class name that you have queried above.
    })
<p class="open"></p>
<p class="open"></p>
...