Задать вопрос
@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";
	}
}
  • Вопрос задан
  • 194 просмотра
Комментировать
Подписаться 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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Senior Fullstack JavaScript Node.js + React
Simplenight inc.
от 4 000 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Написать сайт на тему: "Интернет-магазин компьютерных игр"
04 мая 2024, в 21:30
3500 руб./за проект
Специалист по маркетингу в проект на стыке Internet of Things и домашних животных
04 мая 2024, в 21:19
1000 руб./в час
Разработать телеграм бота
04 мая 2024, в 21:12
10000 руб./за проект
Ещё заказы