I am trying to code a website, when a Erorr occur because I write
button.classList.add('btn btn-sm btn-outline-primary'); which is wrong cause there is spaces in the added value, so I tried to remove the line to test the code, but when I removed it the same erorr occured, so I make sure that I’ve changed the code but the erorr keep occurring so I chicked the source code in google’s dev-tools, and I see that the code haven’t changed at all even after removing the line, this is my only js file

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);
  
    load_mailbox('inbox')
  //   By default, load the inbox
    document.querySelector('#compose-form').addEventListener('submit', send_email)
  
  })
  function compose_email() {
  
  //   Show compose view and hide other views
    document.querySelector('#emails-view').style.display = 'none';
    document.querySelector('#email-content-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 = '';
  }
  
  function load_mailbox(mailbox) {
    maindiv = document.querySelector('#emails-view')
  //   Show the mailbox and hide other views
    maindiv.style.display = 'block';
    document.querySelector('#compose-view').style.display = 'none';
    document.querySelector('#email-content-view').style.display = 'none';
  
  
  //   Show the mailbox name
    maindiv.innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;
  
  //   Show the mailbox content
    fetch(`/emails/${mailbox}`)
    .then(response => response.json())
    .then(results => {
      results.forEach(result => {
        const button = document.createElement('button');
        button.classList.add('btn btn-sm btn-outline-primary');
        const subdiv = document.createElement('div');
        subdiv.style.border = "1px solid black";
        if (result.read) {
          subdiv.style.background = "gray";
        }
        subdiv.innerHTML = `
        <h4>${result.sender}</h4>
        <p>${result.subject}</p>
        ${result.timestamp}`
  
        subdiv.addEventListener('click', function() {
          view_email(result.id)
        });
        if (mailbox === 'inbox'){
          button.value = 'Archive'
          button.addEventListener('click', () => {
            fetch(`/emails/${result.id}`, {
              method: 'PUT',
              body: JSON.stringify({
                  archived: true
              })
            })
            load_mailbox('inbox')
          })
        }
        else {
          button.value = 'Unarchive'
          button.addEventListener('click', () => {
            fetch(`/emails/${result.id}`, {
              method: 'PUT',
              body: JSON.stringify({
                archived: false
              })
            })
            load_mailbox('inbox')
          })
        }
        maindiv.append(subdiv);
        maindiv.append(button);
      })
    })
  }
  
  function send_email() {
    fetch("/emails", {
      method: 'POST',
      body: JSON.stringify({
        recipients: document.querySelector('#compose-recipients').value,
        subject: document.querySelector('#compose-subject').value,
        body: document.querySelector('#compose-body').value
      })
    })
    .then(response => response.json())
    .then(result => {
      console.log(result)
    })
    load_mailbox('sent')
  }
  
  function view_email(id) {
    email_content_div = document.querySelector('#email-content-view');
    document.querySelector('#emails-view').style.display = 'none'; 
    document.querySelector('#compose-view').style.display = 'none';
    email_content_div.style.display = 'block';
  
    fetch(`/emails/${id}`)
    .then(response => response.json())
    .then(email => { 
      email_content_div.innerHTML = `
      <p>From: ${email.sender}</p>
      <p>To: ${email.recipients}</p>
      <p>Subject: ${email.subject}</p>
      <p>Timestamp: ${email.timestamp}</p>
      <button class="btn btn-sm btn-outline-primary" id="Reply">Reply</button>
      <p>${email.body}</p>
      `
    })
    fetch(`/emails/${id}`, {
      method: 'PUT',
      body: JSON.stringify({
        read: true
      })
    })
  }
  
  function list_emails(result) {
      const button = document.createElement('button');
      const subdiv = document.createElement('div');
      subdiv.style.border = "1px solid black";
      if (result.read) {
        subdiv.style.background = "gray";
      }
      subdiv.innerHTML = `
      <h4>${result.sender}</h4>
      <p>${result.subject}</p>
      ${result.timestamp}`
  
      subdiv.addEventListener('click', function() {
        view_email(result.id)
      });
      if (mailbox === 'inbox'){
        button.value = 'Archive'
        button.addEventListener('click', () => {
          fetch(`/emails/${result.id}`, {
            method: 'PUT',
            body: JSON.stringify({
                archived: true
            })
          })
        })
      }
        button.addEventListener('click', () => {
          fetch(`/emails/${result.id}`, {
            method: 'PUT',
            body: JSON.stringify({
              archived: false
            })
          })
        })
        maindiv.append(subdiv);
        maindiv.append(button);
      }

and this is my html file

{% extends "mail/layout.html" %}
{% load static %}

{% block body %}
    <h2>{{ request.user.email }}</h2>

    <button class="btn btn-sm btn-outline-primary" id="inbox">Inbox</button>
    <button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
    <button class="btn btn-sm btn-outline-primary" id="sent">Sent</button>
    <button class="btn btn-sm btn-outline-primary" id="archived">Archived</button>
    <a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
    <hr>

    <div id="emails-view">
    </div>

    <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>
            <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 type="submit" class="btn btn-primary"/>
        </form>
    </div>

    <div id="email-content-view">

    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'mail/inbox.js' %}"></script>
{% endblock %}

I’ve tried to (hard reload) the page but it didn’t work, and I checked the disabled cache in the dev-tools/network.