Блог

Здесь я сталкиваюсь с небольшой проблемой с моим кодом javascript. Я следовал этому руководству для чего-то довольно простого (обычно): https://www.youtube.com/watch?v=kQW-MXriUIUamp;t=417samp;ab_channel=CodewithAniaKubów#JavaScriptGames

Что я сделал: Конечно, я адаптировал HTML, предложенный в руководстве, к визуальному результату, который я хотел получить, но я позаботился о том, чтобы сохранить правильные атрибуты class и id для моих разных элементов.

С другой стороны, я действительно использовал тот же код в JS, чтобы убедиться, что все соответствует руководству.

Вот часть HTML, которая нас интересует:

 <div class="item">
          <a href="contact.html">
            <img src="img/services/service-5.jpg" alt="service" />
          </a>
          <div class="expandMoreContent" id="showMoreContent5">
            <p>
              Lorem ipsum dolor sit amet consectetur,
              adipisicing elit. Enim, suscipit. Eos tempora dolorem commodi
              consectetur consequatur repellat nam, sunt repudiandae maiores
              modi velit, in possimus nesciunt quas, dicta ullam ex.
            </p>
          </div>
          <div class="expandMoreHolder">
            <span
              expand-more
              data-hidetext="Less..."
              data-showtext="...Read More"
              data-target="ShowMoreContent5"
              class="btn-expand-more"
              >...Read more</span
            >
          </div>
          <a href="contact.html" class="btn-light">
            <i class="fas fa-clipboard"></i> Request a quote
          </a>
        </div>
 

И вот мой javascript для желаемого эффекта:

 // Show and hide more or less text services

document.addEventListener('DOMContentLoaded', () => {
const expandsMore = document.querySelectorAll('[expand-more]')

function expand() {
const showContent = document.getElementById(this.dataset.target)
  if(showContent.classList.contains('expand-more'))) { // Apparently the error is on this line, but I can't figure it out...
    this.innerHTML=this.dataset.showText
}else {
  this.innerHTML=this.dataset.hideText

}
showContent.classList.toggle('expand-active')
}
expandsMore.forEach(expandMore => {
  expandMore.addEventListener('click', expand)
})

})
 

Чего я хочу :
Поэтому моя цель — создать текстовый переключатель в разделе service div на моем веб-сайте.

Что я получаю :

Проблема в том, что я не получаю никакого результата, кроме этой ошибки в моей консоли: Неперехваченная ошибка типа: не удается прочитать свойство ‘classList’ с нулевым значением в HTMLSpanElement.expand. Я думаю, что что-то застряло и не позволяет добавить класс «expand-active» к моим HTML-элементам в строку, которую я прокомментировал в JS, но не могу понять, что именно это такое. Я использовал тот же код из руководства в начале. И это очень недавнее обновление, поэтому отслеживание устаревания исключается 🙂

Я благодарю вас за любое предложение, которое вы могли бы мне предложить!

причина в том, что в html <div class="expandMoreContent" id="showMoreContent5"> первая буква вашего идентификатора находится в нижнем регистре

в javascript запрос элемента начинается с прописной буквы

data-target="ShowMoreContent5"

const showContent = document.getElementById(this.dataset.target)

измените любой из них, он будет работать.

плюс: код, который вы вставляете здесь, имеет другую проблему, бесполезную правую скобку здесь, пожалуйста, удалите.

if(showContent.classList.contains('expand-more'))) { // Apparently the error is on this line, but I can't figure it out...