Why does my js work incorrectly if i do not reload the page. This is for CS50 Web Project 3

Question

I finished the Send Mail part of the project,it works correctly the first time but after the first mail if i do not reload the page it sends the same mail 2 times then 3 times...unitl i reload.

Here is the js code:

        document.querySelector('#compose').addEventListener('click', compose_email);

        function compose_email() {
    
      // Show compose view and hide other views
      document.querySelector('#emails-view').style.display = 'none';
      document.querySelector('#compose-view').style.display = 'block';
    
      // Clear out composition fields
      document.querySelector('#compose-recipients').value = '';
      document.querySelector('#compose-subject').value = '';
      document.querySelector('#compose-body').value = '';
    
    
      bt = document.querySelector('#submit')
      bt.addEventListener('click', () => {
        let destination = document.querySelector('#compose-recipients').value;
        let subject =  document.querySelector('#compose-subject').value;
        let body = document.querySelector('#compose-body').value;
    
        fetch('/emails', {
          method: 'POST',
          body: JSON.stringify({
              recipients: destination,
              subject: subject,
              body: body
          })
        })
        .then(response => response.json())
        .then(result => {
            // Print result
            console.log(result);
        });
        load_mailbox('sent');
      })
      
    }

And the HTML code:

<div id="compose-view">
    <h3>New Email</h3>
    <form id="compose-form" onsubmit="return false">
        <div class="form-group">
            From: <input disabled class="form-control" value="{{ request.user.email }}">
        </div>
        <div class="form-group">
            To: <input id="compose-recipients" class="form-control">
        </div>
        <div class="form-group">
            <input class="form-control" id="compose-subject" placeholder="Subject">
        </div>
        <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
        <input id = "submit" type="submit" class="btn btn-primary"/>
    </form>
</div>

Answer 1

Your problem lies in the fact that you're running this...

bt.addEventListener('click', () => { ... });

...every time the compose view is shown. That is, every time the user clicks the #compose button, a new event listener is added to the #submit button. Then, when the #submit button is clicked all the event listeners are executed, and so it sends multiple requests.

You should separate "showing the form" from "setting up the form". The set up of the form, where you attach the event listener to the #submit button, is something you should do only once . On the other hand, the rest of the stuff (emptying fields and actually showing the compose view and hiding others) is what you should do every time you want to show that view.