Hello everyone. I have a problem with responsive menu using javascript

[pandabuddy]

   const btn = document.querySelector('.btn-responsive')
const heade = document.querySelector('.menu-responsive');
function change(){
  heade.classList.toggle('toggle');
}
btn.addEventListener('click', change);

const menu = document.querySelectorAll('li a');
menu.forEach(m => {
  m.addEventListener('click', change)
});

Every time, when i click on link, the script restart, and it doesn’t toggle class. But when in click in ‘btn’ it works good!

Thanks everybody!

[m3g4p0p]

@pandabuddy

Every time, when i click on link, the script restart, and it doesn’t toggle class. But when in click in ‘btn’ it works good!

Hi @pandabuddy, if you don’t want to follow those links you have to prevent the default event:

function change (event) {
  event.preventDefault()
  heade.classList.toggle('toggle')
}

[pandabuddy]

Sorry, i don’t understand.

I think that I explained bad, my problem.

when I click in ‘btn’, my script work good. But when i click in ‘menu’ my script works, but him ‘reload’ page. I don’t want that him reload page.

[Paul_Wilkins]

When you click menu, the browser reloads the page. You don’t want the browser to reload the page. The default action of the web browser when you click menu is to reload the page.

The event.preventDefault() stops the browser from doing its default action. Now when you click on menu the page doesn’t reload.

[m3g4p0p]

@pandabuddy

I don’t want that him reload page.

Yes, that’s what I meant to prevent. Your menu item links presumably have an empty href attribute, which will just reload the page; you can prevent this as shown above.

Another possibility would be to give those links a href="#", which will however change the URL; or no href attribute at all, which again will compromise accessibility. How does your markup look like though?

(x-post)

[pandabuddy]

<header class='menu-responsive'>
			<div class="wrapper">
				<h1><a href=""><img src="core/image/logo_.png" alt="logo barber shop"></a></h1>
				<nav>
					<ul>
						<li><a href="">Sobre Nós</a></li>
						<li><a href="">Nossos Serviços</a></li>
						<li><a href="">Preços</a></li>
						<li><a href="">Barber</a></li>
						<li><a href="">Agendamento</a></li>
					</ul>
				</nav>
				<div class="btn-responsive">
					<div class="pipe1"></div>
					<div class="pipe2"></div>
					<div class="pipe3"></div>
				</div>
			</div>
		</header>

My menu responsive. When i click im ‘button responsive’ the page open my menu. When i click in links of ‘menu responsive’ my page reload. But here https://codepen.io/Coding_Journey/pen/GXYbjw this doesn’t occurs. I want to know when i am wronging.

[m3g4p0p]

@pandabuddy

I want to know when i am wronging.

Your menu item links have empty href attributes, which will cause the page to reload. Call event.preventDefault() in your click handler function to prevent this.

function change (event) {
  event.preventDefault()
  heade.classList.toggle('toggle')
}

@pandabuddy

But here https://codepen.io/Coding_Journey/pen/GXYbjw this doesn’t occurs.

In that pen the href attributes are not empty but point to elements within the same page, which will not cause a reload.

[pandabuddy]

WOW. the reload occurs because my links are empty?

[m3g4p0p]

Yes, an empty href will just link to the current URL, effectively causing a page reload.

[pandabuddy]

Thanks friend. Congrats.