1

Не работает удаление класса на чистом js.

document.addEventListener('DOMContentLoaded', function() {
  var showPizza = document.getElementById('showPizza');
  var pizza = document.getElementsByClassName('pizza');

  showPizza.addEventListener('click', function(e) {
    e.preventDefault();
    pizza.className.remove('hide');
  });

  console.log('get to the choppa!!!');
});
<div class="box">
  <a id="showPizza" href="javascript:void(0);">Pizza Time</a>
  <div class="pizza hide">
    <img src="img/pizza1.gif" alt="pizza" />
  </div>
</div>

Выдает ошибку Uncaught TypeError: Cannot read property 'remove' of undefined. В чем ошибка?

5
  • className -> classList
    – andreymal
    5 сен 2016 в 10:44
  • А в переменной pizza массив из элементов, а не элемент
    – andreymal
    5 сен 2016 в 10:45
  • так тоже делала, та же ошибка
    – siberian
    5 сен 2016 в 10:45
  • в блоке pizza находится одна img
    – siberian
    5 сен 2016 в 10:46
  • Я не про блок, а про переменную js, это массив из блоков.
    – andreymal
    5 сен 2016 в 10:47

3 ответа 3

1

document.addEventListener('DOMContentLoaded', function() {
  var showPizza = document.getElementById('showPizza');
  var pizza = document.getElementsByClassName("pizza")[0];
  console.log(pizza.className);

  showPizza.addEventListener('click', function(e) {
    e.preventDefault();
    pizza.classList.remove('hide');
    console.log(pizza.className)
  });


});
<div class="box">
  <a id="showPizza" href="javascript:void(0);">Pizza Time</a>
  <div class="pizza hide">
    <img src="img/pizza1.gif" alt="pizza" />
  </div>
</div>

5
  • так всегда надо писать [0] ? если там будет много элементов?
    – siberian
    5 сен 2016 в 10:50
  • 1
    @MarinaVoronova пройтись циклом по всему массиву, очевидно
    – andreymal
    5 сен 2016 в 10:51
  • смотря к какому элементу массива вы хотите пременить ту или иную функцию..
    – C.Raf.T
    5 сен 2016 в 10:55
  • чтобы пройтись по всему массиву , нужно точно указать его количество? как то так, например? [0-15] ? а если точное количество элементов не известно?
    – siberian
    6 сен 2016 в 3:13
0

Пробуйте так:

var pizza = document.getElementsByClassName('pizza')[0];

document.addEventListener('DOMContentLoaded', function() {
  var showPizza = document.getElementById('showPizza');
  var pizza = document.getElementsByClassName('pizza')[0];

  showPizza.addEventListener('click', function(e) {
    e.preventDefault();
    
    
    console.log(pizza);
    pizza.classList.remove('hide');
  });

  console.log('get to the choppa!!!');
});
<div class="box">
  <a id="showPizza" href="javascript:void(0);">Pizza Time</a>
  <div class="pizza hide">
    <img src="img/pizza1.gif" alt="pizza" />
  </div>
</div>

-4

Привет!

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('showPizza').addEventListener('click', function(e) {
      e.preventDefault();
      document.getElementsByClassName('pizza')[0].className.remove('hide');
  });
console.log('get to the choppa!!!');
});

Убрал переменные и всё заработало. Почему? А потому, что когда ты пишешь в переменную например:

var pizza = document.getElementsByClassName('pizza')[0]; 

то у тебя скрипт делает из pizza ссылку на

document.getElementsByClassName('pizza')[0]

Обращаясь к pizza ты можешь редактировать то, на что pizza является ссылкой, то бишь скрипты: pizza.innerHTML и document.getElementsByClassName('pizza')[0].innerHTML вернут идентичный результат.

UPD: Переменная showPizza у Вас определилась автоматически, т.к. вы дали элементу id=showPizza. Можете смело обращаться к этой переменной без вызовов метода document.getElementById(...).

3
  • 3
    Нет, не копирует, а создаёт ссылку на те же самые данные. Просто в вопросе [0] отсутствует. Ответ неверный
    – andreymal
    5 сен 2016 в 11:42
  • @andreymal помилуйте! у меня всё работает!
    – Egor
    5 сен 2016 в 13:31
  • 4
    Из работоспособности не обязательно следует верность ответа, вы там бред понаписали, никаких данных не копируется
    – andreymal
    5 сен 2016 в 14:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.