My Page is automatically Reloading when I click the dropdown button

April 20, 2022

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>

>Solution :

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>