Issue
I have a HTML tag that is supposed to run a function in my javascript file (app.js) when it gets clicked (this is implemented using the onclick tag property)
but instead I get the following error:
Uncaught ReferenceError: summon_chat is not defined at HTMLLIElement.onclick
But when in my javascript file (app.js) I code something like this it works:
const list_item = document.querySelector('#listId')
list_item.onclick = function () {
summon_chat()}
But if I don't use list_item.onclick in my app.js file and leave the function alone and assing it directly to the HTML tag using the onclick property it doesn't work
function summon_chat(chat){
//logic
}what am I doing wrong? My base.html file is located at templates/layouts/ and my index.html is located at templates/
This is my index.html fragment that calls the function:
<li onclick="console.log('CLICKED'); summon_chat(this);" class="list-group-item p-3">
This is my base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock title %}</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'styles.css' %}">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
<script src="{% static 'app.js' %}" type="module"></script>
{% block script %}{% endblock script %}
</head>
<body>
<div class="container-fluid">
<main>{% block content %}{% endblock content %}</main>
</div>
</body>
</html>
I already checked the dev console in my browser and the javascript file is loading correctly, I even added a console.log at the beginning of my JS file and it prints in the console, I already deleted the browser cache like 20 times, I inspected the rendering HTML and there's nothing wrong, I already searched here for a solution, I already extended my base.html correctly in my index.html file, I already used {% load static %} in both my index.html and base.html.
Solution
This is about the type='module' statement within your base.html.
When you add it as a module it can not interfere directly with the DOM or listen to events on your document due to scope isolation. You either want to remove the type='module'
<script src="{% static 'app.js' %}"></script>
or you would want to add something that directly links your js function to the dom, as you already did in your question
// Inside your module (app.js)
function myClickFunction() {
console.log('Button clicked!');
}
// Attach the function to the window object to make it globally accessible
window.myClickFunction = myClickFunction;
Answered By - Tarquinius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.