<a> tag not opening popup

{% extends "base.html" %}

{% block  spotify %}
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" id="login" onclick= "openSignInWindow" class="nav-link">Login</a>
        </li>
    </ul>
 </nav>

 <script>  
 let windowObjectReference = null;
 let previousUrl = null;
 var url = "{% url 'login' %}";


  const openSignInWindow = (url, name) => {
  window.removeEventListener('message', receiveMessage);
  const strWindowFeatures =
  'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';
  if (windowObjectReference === null || windowObjectReference.closed) {
     windowObjectReference = window.open(url, name, strWindowFeatures);
   } else if (previousUrl !== url) {
     windowObjectReference = window.open(url, name, strWindowFeatures);
     windowObjectReference.focus();
   } else {
     windowObjectReference.focus();
   }
   // add the listener for receiving a message from the popup
   window.addEventListener('message', receiveMessage, false);
   // assign the previous URL
   previousUrl = url;
 };
 login = document.getElementById(login);
 login.addEventListener(onclick, openSignInWindow(url , spotify));
 </script>

 {% endblock %}

Aim is to open the {% url 'login' } when the link is clicked but I do not know how to pass the javascript function arguments into the <a> onclick. How do I achieve this? Is there a better way to do this instead of using an <a>?

49 thoughts on “<a> tag not opening popup”

Leave a Comment