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