Проверка состояния Javascript | 'element.style.display' не работает в 'if gate'?

#javascript #if-statement #onclick #display

#javascript #if-оператор #onclick #отображать

Вопрос:

Я хочу создать кнопку, которая изменяет режим отображения div и изменяет innerHTML кнопки при нажатии.

Для отображения content2 изначально установлено значение ‘none’.

В данный момент мой код ничего не меняет.

Спасибо за помощь.

Javascript

 let button2 = document.getElementById('more-button-2');
let content2 = document.getElementById('more2');

   button2.onclick = function() {
        if (content2.style.display === 'none') {
            content2.style.display = 'block'; 
            button2.innerHTML = 'See less'; 
        } else if (content2.style.display === 'block') {
            content2.style.display = 'none'; 
            button2.innerHTML = 'See more' 
        } 
    };

HTML

     <div class='column'>
        <div class='column-content'>
            <h2>Two</h2>
            <p>Explanation.</p>
            <div class='more-button' id='more-button-2'>See more</div>
            <p id='more2'>More</p>
        </div>
    </div>

Как прокомментировал Pointy, ошибка заключалась в том, что в моем стиле проверялись только стили, определенные в html.

Я отредактировал код для проверки кнопок innerHTML, и теперь он работает. Хотя, возможно, это не лучшая практика…

 button2.onclick = function() {
    if (button2.innerHTML === 'See more') {
        content2.style.display = 'block';
        button2.innerHTML = 'See less';
    } else if (button2.innerHTML === 'See less') {
        content2.style.display = 'none';
        button2.innerHTML = 'See more'
    } 
};

1. style Объект содержит только информацию о стиле, фактически заданную непосредственно для HTML-элементов. Стили, подразумеваемые правилами CSS, не отображаются таким образом; вы должны использовать getComputedStyle() . Гораздо проще добавлять / удалять классы, чтобы заставить подобный код работать.

2. Спасибо, вы были правы. Я заменил if gate для проверки состояния кнопок innerHTML, и теперь это работает. Сообщение обновлено. Мне нужно будет провести некоторое исследование того, как именно работают команды style amp; get computedstyle. Еще раз спасибо.

3. Кстати, хотя это и не отвечает на ваш конкретный вопрос, более идиоматичным способом решения этой проблемы может быть изменение некоторого родительского класса, а затем разрешение всем дочерним элементам обновлять свои стили в CSS на основе нахождения внутри нового класса, а не императивно с помощью JavaScript.

Ответ №1:

Element.stlye не имеет display свойства, пока оно не будет присвоено элементу с помощью Element.style.display = '...' или в html . Для получения точного значения display используйте getComputedStyle . А также используйте тернарные операторы вместо if-else

 let button2 = document.getElementById('more-button-2');
let content2 = document.getElementById('more2');

button2.onclick = function() {
  let {display} = window.getComputedStyle(content2);
  content2.style.display = display === 'none' ? 'block' : 'none';
  button2.innerHTML = button2.innerHTML === 'See More' ? 'Show Less' : 'See More'
};

 <div class='column'>
        <div class='column-content'>
            <h2>Two</h2>
            <p>Explanation.</p>
            <div class='more-button' id='more-button-2'>See more</div>
            <p id='more2'>More</p>
        </div>
    </div>