How to include JavaScript in a Django template?

Question

In my Django project 'pizzeria', I have created a static files folder for the app 'pizzas', so the folder structure is: pizzeria/pizzas/static/pizzas/. Inside this folder I have a JavaScript 'hack.js':

//hack.js
<script>   
document.getElementById("home page").innerHTML="Hacked!"
</script>

Now I want to include this script in my Django template (pizzeria/pizzas/templates/pizzas/base.html), however the following setup does not work (the innerHTML does not change on button click):

{% load static %}

<p>
<a href="{% url 'pizzas:index' %}" id="home page">Home page</a>
<a href="{% url 'pizzas:pizzas' %}">Our pizzas</a>
<button onclick="{% static 'pizzas/hack.js' %}">Hack!</button>
</p>

{% block content %} {% endblock content %}

What am I doing wrong?

first, you are writing and HTML tag <script> in the onClick attribute — h1b9b
– h1b9b, Commented Mar 2, 2018 at 19:23

h1b9b · Accepted Answer · 2018-03-02 20:21:34Z

5

You should remove the script tag from your js file and include it with

  <script src="{% static 'pizzas/hack.js' %}"></script>

With a hack.js file like

function onClick() {
   document.getElementById("home_page").innerHTML="Hacked!"
}

Tag ids shouldn't contain spaces, doc
Your button should be

<button onclick="onClick">Hack!</button>

edited Mar 2, 2018 at 20:21

answered Mar 2, 2018 at 19:29

h1b9b

1,0705 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

barciewicz Over a year ago

Sadly it still doesn't work. Should ` <script src="{% static 'pizzas/hack.js' %}"></script>` be included in the template file?

h1b9b Over a year ago

yes it should be in your HTML, maybe it not working cause of your Django settings, you need to set STATIC_URL and STATICFILES_DIRS to your static files folder

barciewicz Over a year ago

STATIC_URL is set OK. I don't think I need STATICFILES_DIRS in this case, because according to the Django documentation it is used only when I want to use static files that are not tied to a particular app?

h1b9b Over a year ago

@barciewicz I edited my answer hopefully that's your issue

barciewicz Over a year ago

Django's 2.0 documentation actually says {% load static %}: docs.djangoproject.com/en/2.0/howto/static-files

|

Collectives™ on Stack Overflow

How to include JavaScript in a Django template?

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related