如何在Django模板中包含JavaScript？

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?

Answer 1

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>