Javascript функция переключения падает, когда я меняю текст на иконки - PullRequest
Новая
       2

Javascript функция переключения падает, когда я меняю текст на иконки

0 голосов
/ 02 февраля 2020

РЕДАКТИРОВАТЬ: простой текст обмена для иконок работает на CHROME, но не включается FIREFOX ....

Вот мой код: https://codepen.io/alanvkarlik/pen/QWwedJY

Прямо сейчас это работает нормально.

Однако в верхнем меню я бы хотел отобразить: вместо «Скрыть» есть символ ☑, а вместо «Показать» - символ ☐. И для художников, и для релизов.

HTML: 

<div class="navbar">
    All entries: <a class="glyph" id="showAll">☑</a>
    Artists: <a class="glyph" id="toggleArtists">Hide</a>
    Releases: <a class="glyph" id="toggleReleases">Hide</a>
</div>

JS: 

document.querySelector('#showAll').onclick = function () {
    document.querySelector('#showAll').innerHTML = '☑';
    document.querySelector('#toggleReleases').innerHTML = 'Hide';
    document.querySelector('#toggleArtists').innerHTML = 'Hide';
    document.querySelectorAll('li').forEach(function (item, i) {
        item.style.display = '';
    });
};

document.querySelector('#toggleReleases').onclick = function () {
    document.querySelectorAll('li.release').forEach(function (item, i) {
        item.style.display = item.style.display == '' ? 'none' : '';
    });

    document.querySelector('#toggleReleases').innerHTML = document.querySelector('#toggleReleases').innerHTML == 'Hide' ? 'Show' : 'Hide';
    if (document.querySelector('#toggleReleases').innerHTML == 'Hide' && document.querySelector('#toggleArtists').innerHTML == 'Hide')
        document.querySelector('#showAll').innerHTML = '☑';
    else
        document.querySelector('#showAll').innerHTML = '☐';
};

document.querySelector('#toggleArtists').onclick = function () {
    document.querySelectorAll('li.artist').forEach(function (item, i) {
        item.style.display = item.style.display == '' ? 'none' : '';
    });

    document.querySelector('#toggleArtists').innerHTML = document.querySelector('#toggleArtists').innerHTML == 'Hide' ? 'Show' : 'Hide';
    if (document.querySelector('#toggleReleases').innerHTML == 'Hide' && document.querySelector('#toggleArtists').innerHTML == 'Hide')
        document.querySelector('#showAll').innerHTML = '☑';
    else
        document.querySelector('#showAll').innerHTML = '☐';
};

и если я поменяю все «Шкуры» на ☑, а все «Шоу» на ☐, функция переключения не сработает ...

Я новичок JS, пожалуйста, go легко, если это легко исправить?

Безопасно ли использовать подобные символы для просмотра? Если нет, то как лучше всего использовать эти значки и как их реализовать?

спасибо

...