My Page is automatically Reloading when I click the dropdown button-CodePudding

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 >
      <button  name="drop" href="#">
        Select hours
      </button>
      <div >
        <button  href="#">6 Hours</button>
        <button  href="#">8 Hours</button>
        <button  href="#">10 Hours</button>
        <button  href="#">16 Hours</button>
        <button  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>

CodePudding user response：

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>