I'm just a newbie in javascript, I'm using a multiline forms and I can't find the reason why my page is reloading when I click the dropdown button and it keeps getting back on the first page of my form.
here is my code in the dropdown
<div class="container3">
<button class="click" name="drop" href="#">
Select hours
</button>
<div class="list">
<button class="links" href="#">6 Hours</button>
<button class="links" href="#">8 Hours</button>
<button class="links" href="#">10 Hours</button>
<button class="links" href="#">16 Hours</button>
<button class="links" href="#">20 Hours</button>
</div>
</div>
here is the javascript:
<script>
let click = document.querySelector('.click');
let list = document.querySelector('.list');
click.addEventListener("click", ()=>{
list.classList.toggle('newlist');
});
</script>
First remove href property from button tags.
href is a property of a tag.
and if you want to cancel event of button add this to your code event.preventDefault()
here an example:
<script>
let click = document.querySelector('.click');
let list = document.querySelector('.list');
click.addEventListener("click", (event)=>{
event.preventDefault()
list.classList.toggle('newlist');
});
</script>