Почему выдает ошибку?

Question

[Vova135798]

Попытался сделать скрипт, который добавляет класс .active к выбранному пункту, но мне выдает ошибку в третей строчке
https://codepen.io/vladimir2021794/pen/BadeEpw

Answer 1

[Андрей Мартынкевич]

Вы написали docunent, а надо document

Comments

[Vova135798]

Все равно не работает

[Андрей Мартынкевич]

Vova135798, если я правильно понял, то попробуйте данный код

let first_item = document.querySelector(".first-item");
let second_item = document.querySelector(".second-item");
let first_info = document.querySelector(".first-info");
let second_info = document.querySelector(".second-info");

function second(){
    first_item.classList.remove('active');
    second_item.classList.add('active');
    first_info.classList.remove('active');
    second_info.classList.add('active');
}
function first(){
    first_item.classList.add('active');
    second_item.classList.remove('active');
    first_info.classList.add('active');
    second_info.classList.remove('active');
}

first_item.onclick = second;
second_item.onclick = first;

[Vova135798]

Андрей Мартынкевич, Все сработало. Почему классы выбраны не через ByClassName?

[Андрей Мартынкевич]

Vova135798, потому что так удобнее) Через querySelector очень удобно искать элементы. А и учитывайте, что вы использовали getElementsByClassName(Получить массив элементов с заданным классом). Для получения одного элемента с заданным классом используйте getElementByClassName.

[Vova135798]

Андрей Мартынкевич, Понял, спасибо!

[Андрей Мартынкевич]

Vova135798, Странно, у меня класс удаляется, но визуально ничего не происходит т.к вы не указываете display: none для неактивных элементов. Вот, добавьте код ниже в css и скажите правильно ли я понял вас

.first-info, .second-info{
  display: none;
}

[Vova135798]

Андрей Мартынкевич, Я уже увидел свою ошибку. Все работает. Спасибо