Кнопка открывает скрытый текст, но затем не закрывает обратно

Question

Написал код по видео и переделал его под себя. Изначально, вторая часть текста обернута спаном и ему задано свойство: display: none. При нажатии на кнопку display должен меняться на inline, чтобы появилась вторая часть текста.

А затем, при нажатии на кнопку второй раз этот span с текстом должен исчезать. Но срабатывает только первая часть плана: текст появляется. А дальше не фурычит.

В чем может быть дело?

код html:

<div class="text__container">
<p class="text-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum asperiores explicabo, et reprehenderit eum officiis! Nesciunt ea eaque deserunt nostrum omnis, asperiores eius quod inventore illo rerum eveniet, maxime cum?</p>
<p class="text-2" ><span id="more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti debitis temporibus laborum. Vel, non exercitationem animi doloremque ratione ab ullam, nemo quia laboriosam asperiores, repellat corrupti cum dolor harum necessitatibus.</span></p>
</div>

<button class"text__button" id="btn" onclick='readMore()'>Читать далее</button>

код css:

#more {
  display: none;
}

код js:

function readMore(){
  let more = document.getElementById('more');
  let btn = document.getElementById('btn');
  
  if(more.style.display === 'none'){
    btn.innerHTML = 'Читать далее';
    more.style.display = 'inline';
  } else {
    btn.innerHTML = 'Скрыть';
    more.style.display = 'none';
  }
}

Answer 1

Как вариант...

   <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <style>
    #more.off {
      display: none;
    }
    </style>
    <script>
    document.addEventListener('DOMContentLoaded', _ => {
        document.getElementById('btn').addEventListener('click', function () {
            document.getElementById('more').classList.toggle('off')
            this.innerHTML = this.innerHTML === 'Скрыть' ? 'Читать далее' : 'Скрыть'
        })
    })
    </script>
    </head>
    <body>
    <div class="text__container">
        <p class="text-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum asperiores explicabo, et reprehenderit eum officiis! Nesciunt ea eaque deserunt nostrum omnis, asperiores eius quod inventore illo rerum eveniet, maxime cum?</p>
        <p class="text-2" >
            <span id="more" class='off'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti debitis temporibus laborum. Vel, non exercitationem animi doloremque ratione ab ullam, nemo quia laboriosam asperiores, repellat corrupti cum dolor harum necessitatibus.</span>
            </p>
    </div>
    
    <button class"text__button" id="btn">Читать далее</button>
    </body>
    </html>

Answer 2

Во-первых у вас там в HTML синтаксическая ошибка: в последней строке пропал знак = в присвоении имени класса. А во вторых, что куда важнее, вы бы попробовали ради отладки, прежде чем ставить условие if, сделать вывод переменной, которую проверяете console.log(more.style.display) и сразу бы всё поняли.

function readMore(){
  let more = document.getElementById('more');
  let btn = document.getElementById('btn');
  if(more.style.display === 'none'){
     more.style.display = 'inline';
     btn.innerHTML = 'Скрыть';
    
  } else {
    more.style.display = 'none';
    btn.innerHTML = 'Читать далее';   
  }
}

<div class="text__container">
<p class="text-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum asperiores explicabo, et reprehenderit eum officiis! Nesciunt ea eaque deserunt nostrum omnis, asperiores eius quod inventore illo rerum eveniet, maxime cum?</p>
<p class="text-2" ><span id="more" style="display: none">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti debitis temporibus laborum. Vel, non exercitationem animi doloremque ratione ab ullam, nemo quia laboriosam asperiores, repellat corrupti cum dolor harum necessitatibus.</span></p>
</div>

<button class="text__button" id="btn" onclick='readMore()'>Читать далее</button>

P.S. UPD: Надеюсь вы заметили куда переехал ваш CSS и поняли почему. Однако, если вы хотите пользоваться внешней таблицей стилей, то и проверять текущее состояние элемента потребуется несколько иначе: window.getComputedStyle(more).getPropertyValue("display")

БЛОГ НА HUSL

Кнопка открывает скрытый текст, но затем не закрывает обратно

Ответы (2 шт):