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

user_19457500 0
Viewed 47

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 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 %}
javascript
1 Answers

You are invoking the function when you are assigning it to onclick, change it to this:

document.querySelectorAll('.individual_email_click').forEach(a =>{
  a.onclick = open_email;
});

function open_email() {
  console.log("this works!!!");
};
<a class="individual_email_click">click me!</a><br>
<a class="individual_email_click">or me!</a>

For your specific example you will need to run this logic after generating the links, you could do something like this:

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%";
  
  // add this here instead
  document.querySelectorAll('.individual_email_click').forEach(a =>.  {
    a.onclick = open_email;
  });
};
user_43267150
Related