Cannot find JavaScript script file from HTML file script

Question

In the following Image of code, I am trying to reference the javascript file "doggies.js" that is currently in the basket folder. This happens on the click of a button on my website, but every time it says it cannot find the file. I have tried ../doggies.js as well but this does not work, is there any reason as to why this might be happening?

<script type="text/javascript">
 $(document).on('click', '.checkout-button', function () {
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "doggies.js"; 
 document.getElementsByTagName("head")[0].appendChild(script);
 return false;
 console.log("yo")
 })
</script>

Here is the error

Not Found: /basket/doggies.js
[13/May/2021 18:50:22] "GET /basket/doggies.js HTTP/1.1" 404 3322

• pullidea-dev: Are you using Django framework?
• alborzdev: @Sophie yes I am using Django, does that affect things?
• Sırrı Kırımlıoğlu: how do you import the file? share please

Answer 1

Create static folder in your root directory add this line to settings.py

STATIC_URL = '/static/'

And load STATIC in your html file and use static to load the javascript files.

{% load static %}
{% static 'js/doggies.js' %}

• pullidea-dev: Can you check my answer then? 😊
• pullidea-dev: Thanks. Let`s keep in touch.