Не добавляется класс при изменении размера страницы

Question

При уменьшении ширины страницы до 320px, к тегу должен добавляться новый класс. Если ширина больше 320px, этот класс удаляется. Но, скрипт не работает.

< script >
  function resizeWidth() {
    if ($(window).width() < 320) {
      let element = document.getElementsByClassName('test');
      element.classList.add("mystyle");
    } else {
      let element1 = document.getElementsByClassName('test');
      element1.classList.remove("mystyle");
    }
  }

resizeWidth();

$(window).resize(function() {
  resizeWidth();
}); <
/script>

<div class="test"></div>

Если использовать getElementById, то все нормально работает.

< script >
  function resizeWidth() {
    if ($(window).width() < 320) {
      let element = document.getElementById('test');
      element.classList.add("mystyle");
    } else {
      let element1 = document.getElementById('test');
      element1.classList.remove("mystyle");
    }
  }

resizeWidth();

$(window).resize(function() {
  resizeWidth();
}); 
</script>

<div id="test"></div>

Answer 1

Проблема у вас в том, что getElementsByClassName возвращает массив значений, а getElementById одно значение, если у вас один элемент с классом test, то можно сделать следующее:

let element = document.getElementsByClassName('test')[0];

Если нужно к каждому элементу, тогда нужно пройтись по всем элементам:

let elements = document.getElementsByClassName('test');
Array.prototype.forEach.call(elements, function(element) {
    element.classList.add("mystyle");
});

Вижу что используете let, можно использовать ES6:

let elements = document.getElementsByClassName('test');
Array.from(elements).forEach((element) => {
    element.classList.add("mystyle");
});

БЛОГ НА HUSL

Не добавляется класс при изменении размера страницы

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