Задать вопрос
@MDMN21
javascript

Почему uncaught referenceerror: menu is not defined?

пытаюсь подключить адаптивное меню, при нажатии на иконку ничего не происходит. в .js файле в первой строке выдает ошибку uncaught referenceerror: menu is not defined
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Service-Pro</title>
	<script src="script.js"></script>
</head>
<body>
	<header>
		<div class="header_logo"><p>Service-Prosts</p></div>
		<nav>
			<div class="topnav" id="myTopnav">
				<a href="#">НАЧАЛО</a>
				<a href="#">УСЛУГИ</a>
				<a href="#">О НАС</a>
				<a href="#">ВОПРОС-ОТВЕТ</a>
				<a href="#">ФОРМА</a>
				<a href="#" id="menu" class="icon">&#9776;</a>
			</div>
		</nav>
	</header>
</body>
</html>


menu.oneclick = function myFunction() {
	var x = document.getElementById('myTopnav');
	if (x.className === "topnav") {
		x.className += " responsive";
	} else {
		x.className = "topnav";
	}
}
  • Вопрос задан
  • 223 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
@7rows
Frontend Разработчик / Vue / JS / TS / CSS
ну, судя по коду, либо он не полный, либо что-то не то
вот тут есть пример, очень похож на ваш Ссылка
Вам, надо либо в ссылке где иконка вызывать функцию клика, либо, повесить слушателя, js не понимает что это такое и поэтому вам и говорит, что menu не определено
Ответ написан
Комментировать
Комментировать
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Скрипт выполняется сразу после подключения. И только потом продолжается рендер остальной страницы.
То есть на момент выполнения скрипта, никакого меню в разметке еще нет.
Решения два

1. Выполнять весь код в обработчике DOMContentLoaded / https://learn.javascript.ru/onload-ondomcontentloaded
2. Подключать скрипты в конце страницы, перед закрывающим тегом body
Ответ написан
Комментировать
Комментировать
Eugevin
@Eugevin
22 года, frontend как смысл жизни
Немного исправил ваш код:

<script defer src="script.js"></script>

window.onload = () => {
  menu.onclick = function myFunction() {
    const x = document.getElementById('myTopnav');
    if (x.classList.contains('topnav')) {
      x.classList.add('responsive')
    }
  }
}


Документация: defer, classList
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обработать фото в стиле ASCII
22 нояб. 2024, в 08:04
1 руб./за проект
Сверстать десктоп версию сайта в tailwind
22 нояб. 2024, в 06:06
1500 руб./в час
Создать TG бота
22 нояб. 2024, в 06:04
1 руб./за проект
Ещё заказы