Не скрывает элемент по нажатию кнопки

Question

По нажатию на div с классом .game-image-description должен выезжать текст с классом .hide-text. И текст выезжает, однако, когда я нажимаю на кнопку с класом .close-description-btn (зелёный крестик в правом верхнем углу) текст не скрывается. В чём проблема?

Так же добавляю изображение.

Вот HTML

<article class="game-item">
    <h3 class="game-item__rank">Rank <span class="rank-number">3</span></h3>
    <div class="game-item__image">
        <div class="game-image-description">
            <p itemprop="description" class="hide-text">
                <button class="close-description-btn">✖</button>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
            </p>
        </div>
    </div>
    <a href="#">
        <button class="game-item__button">read review</button>
    </a>
</article>

Вот JS

const btns = document.querySelectorAll('.game-image-description');
    // text.removeAttribute("style");
    for (let btn of btns) {
      
        btn.onclick = () => {
            
            const text = btn.parentElement.querySelector('.hide-text');

            text.style.marginBottom = '0px';
        };
    }

    const btnClose = document.querySelectorAll('.close-description-btn');
    for (let btn of btnClose) {
        
        btn.onclick = () => {

            const text = btn.closest('.hide-text');

            text.style.marginBottom = '-100%';
        };

    }

Answer 1

В приведенным ниже блоке кода Вы вешаете событие onclick на div целиком, что не дает возможности нажать на крестик впоследствии:

const btns = document.querySelectorAll(".game-image-description")

for (let btn of btns) {
  btn.onclick = () => {
    const text = btn.parentElement.querySelector(".hide-text")
    text.style.marginBottom = 0
  }
}

Без этого все работает:

const handleClick = event => {
  event.target.closest(".hide-text").style.display = "none"
}

document.querySelectorAll(".close-description-btn").forEach(item => item.addEventListener("click", handleClick))

<article class="game-item">
  <h3 class="game-item__rank">Rank <span class="rank-number">3</span></h3>
  <div class="game-item__image">
    <div class="game-image-description">
      <p itemprop="description" class="hide-text">
        <button class="close-description-btn">✖</button> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
      </p>
    </div>
  </div>
  <a href="#">
    <button class="game-item__button">read review</button>
  </a>
</article>

Вариант решения:

const handleClick = event => {
  const target = event.target
  if (target.classList.contains("close-description-btn")) {
    target.closest(".hide-text").style.display = "none"
    return false
  }
  const ht = target.querySelector(".hide-text")
  if (ht.style.display === "none") {
    ht.style.display = "block"
  }

}

document.querySelectorAll(".game-image-description").forEach(item => item.addEventListener("click", handleClick))

<article class="game-item">
  <h3 class="game-item__rank">Rank <span class="rank-number">3</span></h3>
  <div class="game-item__image">
    <div class="game-image-description">временно видимая часть контейнера на которую можно нахать что бы показался текст целиком
      <p itemprop="description" class="hide-text" style="display: none;">
        <button class="close-description-btn">✖</button> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
      </p>
    </div>
  </div>
  <a href="#">
    <button class="game-item__button">read review</button>
  </a>
</article>

БЛОГ НА HUSL

Не скрывает элемент по нажатию кнопки

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