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 you have read our privacy policy.

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