In JavaScript code combining two functions not working, but in single function works fine

Question

CS50 WEB's project3 mail

When I use single funciton it works properly which is

function compose_email() {

  // Show compose view and hide other views
  document.querySelector('#read-view').style.display = 'none';
  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 = '';

  document.querySelector('#compose-form').onsubmit = function() {

    let recipient = document.querySelector('#compose-recipients');
    let subject = document.querySelector('#compose-subject');
    let body = document.querySelector('#compose-body');
  
    fetch('/emails', {
      method: 'POST',
      body: JSON.stringify({
        recipients: recipient.value,
        subject: subject.value,
        body: body.value,
      })
    })
    .then(response => response.json())
    .then(result => {
      console.log(result);
    });
    load_mailbox('sent')
    return false;
  };
};

But when I split it into two function it doesn't load load_mailbox('sent')

function compose_email() {

  // Show compose view and hide other views
  document.querySelector('#read-view').style.display = 'none';
  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 = '';

  document.querySelector('#compose-form').onsubmit = function() {
    send_email();
   
  };
};

function send_email() {
let recipient = document.querySelector('#compose-recipients');
    let subject = document.querySelector('#compose-subject');
    let body = document.querySelector('#compose-body');
  
    fetch('/emails', {
      method: 'POST',
      body: JSON.stringify({
        recipients: recipient.value,
        subject: subject.value,
        body: body.value,
      })
    })
    .then(response => response.json())
    .then(result => {
      console.log(result);
    });
    load_mailbox('sent')
    return false;
};

Answer 1

Your return false in send_email is being ignored by the caller.

Have the caller return that result, so that it will prevent the default behavior.

document.querySelector('#compose-form').onsubmit = function() {
    return send_email();
//   ^^^
};

Or just assign send_email as the handler. Be sure you do not include the () call operator.

document.querySelector('#compose-form').onsubmit = send_email;