Ошибка в консоли tabs.forEach is not a function at hideTabContent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="header__left-block">
<div class="header__logo">
<img src="icons/logo.svg" alt="Логотип">
</div>
<nav class="header__links">
<a href="#" class="header__link">Доставка питания</a>
<a href="#" class="header__link">Второй пункт</a>
</nav>
</div>
<div class="header__right-block">
<button class="btn btn_white">Связаться с нами</button>
</div>
</header>
<div class="sidepanel">
<div class="sidepanel__text"><span>Социальные сети</span></div>
<div class="sidepanel__divider"></div>
<a href="#" class="sidepanel__icon">
<img src="icons/instagram.svg" alt="instagram">
</a>
<a href="#" class="sidepanel__icon">
<img src="icons/facebook.svg" alt="facebook">
</a>
</div>
<div class="preview">
<div class="bgc_blue"></div>
<div class="container">
<div class="tabcontainer">
<div class="tabcontent">
<img src="img/tabs/vegy.jpg" alt="vegy">
<div class="tabcontent__descr">
Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!
</div>
</div>
<!-- <div class="tabcontent">
<img src="img/tabs/elite.jpg" alt="elite">
<div class="tabcontent__descr">
Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!
</div>
</div> -->
<!-- <div class="tabcontent">
<img src="img/tabs/post.jpg" alt="post">
<div class="tabcontent__descr">
Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/vegy.jpg" alt="vegy">
<div class="tabcontent__descr">
Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
</div>
</div> -->
<div class="tabheader">
<h3>Выберите стиль питания</h3>
<div class="tabheader__items">
<div class="tabheader__item tabheader__item_active">Фитнес</div>
<div class="tabheader__item">Премиум</div>
<div class="tabheader__item">Постное</div>
<div class="tabheader__item">Сбалансированное</div>
</div>
</div>
</div>
<div class="preview__life">Живи полной жизнью!</div>
</div>
</div>
<div class="divider"></div>
<div class="offer">
<div class="bgc_y"></div>
<div class="container">
<div class="offer__text">
<h2 class="title">Что мы можем вам предложить?</h2>
<div class="offer__descr">
Наша основная идея - это правильное питание. Оно может быть простым и вкусным. Мы не просто доставка, мы сервис! Мы взяли на себя все расчеты БЖУ, калорийности, объемов порций и прочие важные, но скучные аспекты. Вам остается только полезная, сытная и правильная еда, которую мы привозим прямо под дверь.
</div>
</div>
<div class="offer__action">
<button class="btn btn_dark">Связаться с нами</button>
</div>
</div>
<div class="container">
<div class="offer__advantages">
<h2>Быстро и полезно</h2>
<div class="offer__advantages-text">
Готовка дома занимает много сил, времени и нервов. Мы привозим еду сразу на целый день, и ты можешь действовать так, как тебе удобно, не подстраиваясь ни под кого и будучи уверенным в качестве продукта!
</div>
<h2>Правильный рацион</h2>
<div class="offer__advantages-text">
Мы разработали специальное меню, где учтены все нюансы правильного питания, от баланса БЖУ до их приготовления и дробления рациона.
</div>
</div>
<div class="offer__slider">
<div class="offer__slider-counter">
<div class="offer__slider-prev">
<img src="icons/left.svg" alt="prev">
</div>
<span id="current">03</span>
/
<span id="total">04</span>
<div class="offer__slider-next">
<img src="icons/right.svg" alt="next">
</div>
</div>
<div class="offer__slider-wrapper">
<div class="offer__slide">
<img src="img/slider/pepper.jpg" alt="pepper">
</div>
<!-- <div class="offer__slide">
<img src="img/slider/food-12.jpg" alt="food">
</div>
<div class="offer__slide">
<img src="img/slider/olive-oil.jpg" alt="oil">
</div>
<div class="offer__slide">
<img src="img/slider/paprika.jpg" alt="paprika">
</div> -->
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="calculating">
<div class="container">
<h2 class="title">Рассчитаем вашу потребность в калориях?
</h2>
<div class="calculating__field">
<div class="calculating__subtitle">
Ваш пол
</div>
<div class="calculating__choose" id="gender">
<div class="calculating__choose-item calculating__choose-item_active">Женщина</div>
<div class="calculating__choose-item">Мужчина</div>
</div>
<div class="calculating__subtitle">
Ваша конституция
</div>
<div class="calculating__choose calculating__choose_medium">
<input type="text" id="height" placeholder="Введите рост" class="calculating__choose-item">
<input type="text" id="weight" placeholder="Введите вес" class="calculating__choose-item">
<input type="text" id="age" placeholder="Введите возраст" class="calculating__choose-item">
</div>
<div class="calculating__subtitle">
Выберите вашу физическая активность
</div>
<div class="calculating__choose calculating__choose_big">
<div id="low" class="calculating__choose-item">Низкая активность </div>
<div id="small" class="calculating__choose-item calculating__choose-item_active">Невысокая активность</div>
<div id="medium" class="calculating__choose-item">Умеренная активность</div>
<div id="high" class="calculating__choose-item">Высокая активность</div>
</div>
<div class="calculating__divider"></div>
<div class="calculating__total">
<div class="calculating__subtitle">
Ваша суточная норма калорий:
</div>
<div class="calculating__result">
<span>2700</span> ккал
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="menu">
<h2 class="title">Наше меню на день</h2>
<div class="menu__field">
<div class="container">
<div class="menu__item">
<img src="img/tabs/vegy.jpg" alt="vegy">
<h3 class="menu__item-subtitle">Меню "Фитнес"</h3>
<div class="menu__item-descr">Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Продукт активных и здоровых людей. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!</div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Цена:</div>
<div class="menu__item-total"><span>229</span> грн/день</div>
</div>
</div>
<div class="menu__item">
<img src="img/tabs/elite.jpg" alt="elite">
<h3 class="menu__item-subtitle">Меню “Премиум”</h3>
<div class="menu__item-descr">В меню “Премиум” мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!</div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Цена:</div>
<div class="menu__item-total"><span>550</span> грн/день</div>
</div>
</div>
<div class="menu__item">
<img src="img/tabs/post.jpg" alt="post">
<h3 class="menu__item-subtitle">Меню "Постное"</h3>
<div class="menu__item-descr">Меню “Постное” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения, молоко из миндаля, овса, кокоса или гречки, правильное количество белков за счет тофу и импортных вегетарианских стейков. </div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Цена:</div>
<div class="menu__item-total"><span>430</span> грн/день</div>
</div>
</div>
</div>
</div>
</div>
<div class="order">
<div class="container">
<div class="title">Заказывай пробный день прямо сейчас!</div>
<form action="#" class="order__form">
<input required placeholder="Ваше имя" name="name" type="text" class="order__input">
<input required placeholder="Ваш номер телефона" name="phone" type="phone" class="order__input">
<img src="icons/right.svg" alt="right">
<button class="btn btn_dark btn_min">Перезвонить мне</button>
</form>
</div>
</div>
<div class="divider"></div>
<div class="promotion">
<div class="bgc_y"></div>
<div class="container">
<div class="promotion__text">
<div class="title">Акция для новых клиентов!</div>
<div class="promotion__descr">
Мы ценим каждого клиента и предлагаем вам стать одним из них на очень выгодных условиях.
Каждому, кто закажет доставку питание на неделю, будет предоставлена скидка в размере <span>20%!</span>
<br><br>
Акция закончится 20 мая в 00:00
</div>
</div>
<div class="promotion__timer">
<div class="title">Осталось до конца акции:</div>
<div class="timer">
<div class="timer__block">
<span id="days">12</span>
дней
</div>
<div class="timer__block">
<span id="hours">20</span>
часов
</div>
<div class="timer__block">
<span id="minutes">56</span>
минут
</div>
<div class="timer__block">
<span id="seconds">20</span>
секунд
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="social">
<div class="subtitle">Мы в социальных сетях:</div>
<a href="#" class="link">instagram</a>
<a href="#" class="link">facebook</a>
</div>
<div class="pepper">
<img src="icons/veg.svg" alt="pepper">
</div>
<div class="call">
<div class="subtitle">Или позвоните нам</div>
<a href="#" class="link">+380678341034</a>
<a href="#" class="link">+380500941356</a>
</div>
</div>
</footer>
<div class="modal">
<div class="modal__dialog">
<div class="modal__content">
<form action="#">
<div class="modal__close">×</div>
<div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
<input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
<input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
<button class="btn btn_dark btn_min">Перезвонить мне</button>
</form>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Вот весь код где указана ошибка вся строка (tabs.forEach(item => {) подчеркнута как ошибка + указывает что hideTabContent(); тоже ошибка, но не подчеркнуто, просто в консоли указывает что тут ошибка
вот что пишет консоль в браузере Uncaught TypeError: tabs.forEach is not a function at hideTabContent
const tabs = document.querySelector('.tabheader__item'),
tabsContent = document.querySelectorAll('.tabcontent'),
tabsParent = document.querySelector('.tabheader__items');
function hideTabContent() {
tabsContent.forEach(item => {
item.classList.add( 'hide');
item.classList.remove('show', 'fade');
});
tabs.forEach(item => {
item.classList.remove('tabheader__item_active');
});
}
function showTabContent(i = 0) {
tabsContent[i].classList.add('show', 'fade');
tabsContent[i].classList.remove('hide');
tabs[i].classList.add('tabheader__item_active');
}
hideTabContent();
showTabContent();
tabsParent.addEventListener('click', (event) => {
const target = event.target;
if (target && target.classList.contains('tabheader__item')) {
tabs.forEach((item, i) => {
if (target == item) {
hideTabContent();
showTabContent(i);
}
});
}
}); ```
[![введите сюда описание изображения][1]][1]
[1]: https://i.sstatic.net/Z7xCd.png
Источник: Stack Overflow на русском