I just started with the Mail project for CS50Web and came across a really strange problem.

Currently, I'm working on the part where I need to send an email. My algorithm for this is simple:

  1. Add event listener to the form
  2. Upon submission, I take the contents of the field and then send it to the email API via POST

My codebase seems to be correct (in theory) but it is not sending any email. Moreover, it's also not sending an error in case the recipient email does not exist so I have a feeling that maybe my event listener was not initialized properly. However, it seems like it has.

Here is my code:

document.addEventListener('DOMContentLoaded', function() {

  // Use buttons to toggle between views
  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
  document.querySelector('#compose').addEventListener('click', compose_email);
  // Add event listener to the form
  document.querySelector('#compose-form').addEventListener('submit', send_email(event));

  // By default, load the inbox

As you can see, I added an event listener to the form that calls the function send_email:

function send_email(event){
    // Fetches the submitted contents
    const recipients = document.querySelector('#compose-recipients').value;
    const subject = document.querySelector('#compose-subject').value;
    const body = document.querySelector('#compose-body').value;
    // Sends a POST request to the API, and parses the submissin to JSON
    fetch('/emails', {
        method: 'POST',
        body: JSON.stringify({
            recipients: recipients,
            subjects: subjects,
            body: body
    .then(response => response.json())
    .then(result =>{
        // Loads the sent mailbox 
    .catch(error => console.log(error));

I haven't touched anything else in the code, not even the HTML, but here is what inbox.html looks right now:

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

Any chance you guys have an idea on what might be wrong? I've added some console.logs to see if things are happening, but even that doesn't work (I'm not seeing any logs or messages in the console).

Whenever I click submit I only get a 200 message, not a 201 or anything else.


I've found the solution for this.

While debugging I've noticed that NONE of the changes I've made on the JS file is reflected on the browser (I'm using Chrome). Upon doing some research, I found out that this is a caching issue so I did the following:

  1. Disabled all extensions on Chrome
  2. Disabled caching on the Dev Tools (Right Click -> Inspect Source -> Network -> Disable Caching).

Upon doing so, my code suddenly works like magic.

  • Hi there, I'm stuck in the same part. How did you sort out the issue with the value of NULL HTML element? Also, after trying your code, my editor is yelling at me that the argument you pass in to send_email() is depricated. Thank you. – DevelopWithAP Apr 13 at 16:02
  • Can you be more specific? Null HTML element just means that whatever element you're trying to use does not exist. You should probably check if you're referencing to the element properly. – Jerome Ibañez Apr 23 at 9:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .