在 JavaScript 代碼中結合兩個函數不起作用，但在單個函數中工作正常

Question

CS50 WEB的project3郵箱

當我使用單個功能時，它可以正常工作，這是

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;
  };
};

但是當我把它分成兩個函數時，它不會加載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

您在send_email return false被調用者忽略。

讓調用者返回該結果，以防止默認行為。

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

或者只是將send_email指定為處理程序。 確保不包括()調用運算符。

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