Having issues running a simple function upon clicking on a hyperlink using Javascript

I am trying to use querySelectorAll to pickup all my href tags with classname “individual_email_click”. Whenever someone clicks on any of the hyperlink with this classname thereafter, I want to run a function call “open_email”. The below code is however not working. Anyone can help please? Thank you.

This is the relevant javascript.

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);
  document.querySelector('#compose-form').addEventListener('submit', () => {submit_email();load_mailbox('sent'); event.preventDefault()});

  document.querySelectorAll('.individual_email_click').forEach(a =>{
    a.onclick = open_email;
  });
  // By default, load the inbox
  load_mailbox('inbox');
});

function compose_email() {

  // Show compose view and hide other views
  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="";
};

function load_mailbox(mailbox) {

  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#compose-view').style.display = 'none';
  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h1>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h1>`;
  fetch('/emails/' + mailbox)
  .then(response => response.json())
  .then(emails => {
      // Print emails
      console.log(emails);
      create_table(emails);
      console.log("test");
  });

};

function submit_email(){
  console.log("this works!")
  const recipient = document.querySelector('#compose-recipients').value;
  const subject = document.querySelector('#compose-subject').value;
  const body = document.querySelector('#compose-body').value;
  fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
        recipients: recipient,
        subject: subject,
        body: body
    })
  })
  .then(response => response.json())
  .then(result => {
      // Print result
      console.log(result);
  });
};

function create_table(emails) {

  console.log("hello");

  let table = document.createElement('table');
  let thead = document.createElement('thead');
  let tbody = document.createElement('tbody');
  table.appendChild(thead);
  table.appendChild(tbody);
  document.querySelector("#emails-view").appendChild(table);
  console.log("hello there")

  let first_row = document.createElement('tr');
  let first_row_heading_1 = document.createElement('th');
  first_row_heading_1.innerHTML = "S/N";
  let first_row_heading_2 = document.createElement('th');
  first_row_heading_2.innerHTML = "Subject";
  let first_row_heading_3 = document.createElement('th');
  first_row_heading_3.innerHTML = "Sender";
  let first_row_heading_4 = document.createElement('th');
  first_row_heading_4.innerHTML = "Timestamp";
  first_row.appendChild(first_row_heading_1);
  first_row.appendChild(first_row_heading_2);
  first_row.appendChild(first_row_heading_3);
  first_row.appendChild(first_row_heading_4);
  thead.appendChild(first_row);

  let counter = 1;
  for (var key in emails) {

    let row = document.createElement('tr');
    let row_data_1 = document.createElement('td');
    row_data_1.innerHTML = counter;

    let row_data_2 = document.createElement('td');
    let row_data_2_a = document.createElement('a');
    row_data_2_a.innerHTML = emails[key]['subject'];
    row_data_2_a.href = "#0";
    row_data_2_a.className = "individual_email_click";
    row_data_2.appendChild(row_data_2_a);

    let row_data_3 = document.createElement('td');
    row_data_3.innerHTML = emails[key]['sender'];

    let row_data_4 = document.createElement('td');
    row_data_4.innerHTML = emails[key]['timestamp'];

    row.appendChild(row_data_1);
    row.appendChild(row_data_2);
    row.appendChild(row_data_3);
    row.appendChild(row_data_4);
    tbody.appendChild(row);

    counter ++;
  };

  document.querySelector("table").border = "1px solid";
  document.querySelector("table").style.width = "100%";
};

function open_email() {
  console.log("this works!!!");
};

This is the relevant HTML script.

{% 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>
{% endblock %}

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

Leave a Comment