1

Наверное странно видеть данный вопрос от человека с такой репутацией, но я не совсем могу понять, почему данный код выдает ошибку this.classList is undefined

Вот пример :

let acc = document.getElementsByClassName('accordion');
let i;
for(i = 0; i < acc.length; i++){
    acc[i].onclick = () => {
        this.classList.toggle('active');
        this.nextElementSibling.classList.toggle('show');
    }
}
button.accordion{
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: .4s;
}
button.accordion.active,
button.accordion:hover{
    background-color: #ddd;
}
div.panel{
    padding: 0 18px;
    background-color: #fff;
    display: none;
}
div.panel1.show{
    display: block;
}
<button class="accordion">Section 1</button>
<div class="panel">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, dignissimos.
    </p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, dignissimos.
    </p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, dignissimos.
    </p>
</div>

Будьте добры, обьясните, почему так, ведь console.log[0] например отдает нужный мне элемент.

3
  • this в стрелочной функции - тот же, что и в том месте, где она определена
    – user176262
    8 ноя 2018 в 20:16
  • @Igor это не работает, даже если я заменю стрелочную функцию на обыкновенную анонимную 8 ноя 2018 в 20:17
  • Почему же? Ошибки не будет, this тогда будет кликнутым элементом. Смотрите ниже.
    – user176262
    8 ноя 2018 в 20:19

1 ответ 1

3

this в стрелочной функции - тот же, что и в том месте, где она определена -

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

let acc = document.getElementsByClassName('accordion');
let i;
for(i = 0; i < acc.length; i++){
    acc[i].onclick = function() {
        this.classList.toggle('active');
        this.nextElementSibling.classList.toggle('show');
    };
}
button.accordion{
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: .4s;
}
button.accordion.active,
button.accordion:hover{
    background-color: #ddd;
}
div.panel{
    padding: 0 18px;
    background-color: #fff;
    display: none;
}
div.panel.show{
    display: block;
}
<button class="accordion">Section 1</button>
<div class="panel">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, dignissimos.
    </p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, dignissimos.
    </p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, dignissimos.
    </p>
</div>

3
  • простите, вы как всегда правы, глупый вопрос, с очень глупой ошибкой, но спасибо за объяснения со стрелочной функцией! 8 ноя 2018 в 20:20
  • @ПавелИгоревич Пожалуйста. Подправил в ответе название класса panel в стилях.
    – user176262
    8 ноя 2018 в 20:21
  • Да, спасибо, я сразу потом проверил) 8 ноя 2018 в 20:21

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