Блог

Главная - Вопросы по программированию - я получаю «Неперехваченную ошибку типа: Не удается прочитать свойство» переключение «неопределенного» каждый раз, когда я нажимаю на изображение

я получаю «Неперехваченную ошибку типа: Не удается прочитать свойство» переключение «неопределенного» каждый раз, когда я нажимаю на изображение

#javascript

Вопрос:

я попытался сделать так, чтобы элемент появлялся после того, как пользователь нажимает на изображение. для этого я использовал classlist.toggle, но когда я нажимаю на изображение, в консоли появляется сообщение об ошибке «Ошибка типа не обнаружена: не удается прочитать свойство» переключатель «неопределенного»». И, конечно, это не работает 🙁

 const plusbtn = document.querySelector(".btn-img");
const drop = document.getElementsByClassName("boxes")

plusbtn.addEventListener('click', () => {
  drop.classList.toggle("box-drop");
}) 
 .boxes {
  border: 1px solid rgba(39, 81, 197, 0.39);
  margin-top: 50px;
  padding: 15px;
  display: none;
  flex-direction: row;
  justify-content: space-around;
}

.btn-img {
  align-self: center;
  filter: grayscale(50%);
  cursor: pointer;
}

.box-drop {
  display: flex;
} 
 <section>
  <h1>RESOURCES</h1>
  <div class="resource-boxes">
    <div class="box1">
      <div class="top">
        <img src="../images/plus.png" alt="" class="btn-img">
      </div>
      <div class="boxes">
        <a href="">
          <div class="minibox">
            <span class="minibox-txt">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam, enim! </span>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

Ответ №1:

getElementsByClassName возвращает коллекцию HTMLCollection. Вам нужно зациклить каждый элемент в этой коллекции, чтобы получить к нему доступ.

Но, поскольку вы уже используете .querySelector() , вы могли бы также

 const EL_btnPlus = document.querySelector(".btn-img");
const ELS_drop   = document.querySelectorAll(".boxes");

EL_btnPlus.addEventListener('click', () => {
  ELS_drop.forEach(EL => EL.classList.toggle("u-none"));
}); 
 .boxes {
  display: flex;
}

/* Utility classes */

.u-none {
  display: none;
} 
 <img class="btn-img" src="https://lh3.googleusercontent.com/a/AATXAJzyljorAsMuzZ3OQ6B7g_2EU0bkA4lk3iH076AR=k-s64" alt="">

<div class="boxes u-none">Box one</div>
<div class="boxes u-none">Box two</div>

Ответ №2:

drop представляет собой список элементов (см. возвращаемое значение getElementsByClassName ). Вы должны пройти через него и переключить класс на каждом отдельном элементе:

 const plusbtn = document.querySelector(".btn-img");
const drop = [...document.getElementsByClassName("boxes")];

plusbtn.addEventListener('click', () => {
  drop.forEach(e => e.classList.toggle("box-drop"));
}) 
 .boxes {
  border: 1px solid rgba(39, 81, 197, 0.39);
  margin-top: 50px;
  padding: 15px;
  display: none;
  flex-direction: row;
  justify-content: space-around;
}

.btn-img {
  align-self: center;
  filter: grayscale(50%);
  cursor: pointer;
}

.box-drop {
  display: flex;
} 
 <section>
  <h1>RESOURCES</h1>
  <div class="resource-boxes">
    <div class="box1">
      <div class="top">
        <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48amp;d=identiconamp;r=PGamp;f=1" alt="" class="btn-img">
      </div>
      <div class="boxes">
        <a href="">
          <div class="minibox">
            <span class="minibox-txt">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam, enim! </span>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>
Метки: ,