background image not loading from my js file

Using Django Templates & Frontend
1

so i’m new to Django, currently using the load static tag for loading images and so on but when it came to loading a file from a javascript file, it didn’t load and i hope you give me a feedback for this. This is the code for it (check the last line):

const header = document.querySelector('.title-Container');
const checkbox = document.querySelector('.dark-Mode-Checkbox');
const siteButton = document.querySelector('.site-Button');
const registerButton = document.querySelector('.register-Button');
const signUpButton = document.querySelector('.sign-Up-Button');
const titleText = document.querySelector('.site-Text');
const siteLogo = document.querySelector('.site-Logo-Image');

checkbox.addEventListener('change', function() {
        if (this.checked) {
        header.style.backgroundColor = 'rgb(46, 181, 243)';
        if (window.innerWidth > 600) {
            siteButton.style.backgroundColor = 'white';
        }
        else {
            siteButton.style.backgroundColor = 'transparent';
        }
        titleText.style.color = 'black';
        buyProduct.forEach((cart) => {
            cart.style.backgroundColor = 'white';
            cart.style.color = 'black';
            cart.addEventListener('mouseover', () => {
                cart.style.backgroundColor = 'green';
            });
            cart.addEventListener('mouseout', () => {
                cart.style.backgroundColor = 'white';
            });
        });

        document.body.style.backgroundImage = 'url(background-Pictures/light-mode-background.jpg)';

        }
2

Welcome @OGLaYrIx !

Side note: When posting blocks of code here, please remember to enclose the block between lines of three backtick - ` characters. This means you’ll have a line of ```, then the code, then another line of ```.
(I took the liberty of editing your post for this.)
If you want to mark off a single line or part of a line, use a single backtick ` before and after the code in the line. (All on the same line.)

What is your STATIC_URL setting? If it’s static/, then the url you need to use in the url() function call may need to be something like static/background-Pictures/light-mode-background.jpg. (It may be something different, depending upon exactly where in your file system this image may be.)

3

In Django you can’t hardcode static paths inside JS — instead, pass the static URL from your template:

Then use bgUrl in your JS file.

4

That’s a relative URL based on the current URL. You probably want an absolute URL, that is a URL that starts with a /. So like: `‘url(/static/background-Pictures/light-mode-background.jpg)’

Not also that URLs are case sensitive, and you have a capital P there, but all other characters are lowercase, that might also cause issues. I’d recommend sticking to 100% lowercase.

5

This is not an accurate statement. There are many reasons why you might not want to do this, but there’s nothing that prevents you from using hardcoded paths, provide you understand what the constraints and limitations are of doing so.

6

I know that but the guy is a newbie that’s why I tried to keep things simple.

7

much appreciate the feedback, as i said i’m new to django both as a framework and as a community and i’ll keep your advice in mind.

8

yeah sometimes i confuse the use of pascal case even in my file names which i’m thankful to you for pointing that out. About the link, which way is the correct way to set it up in django? in plain javascript it was straightforward, but django uses templates which made me confused about either the file-path and how to correctly use it.

9

The point here is that a static file such as a .js or .css is not a template and is not processed by the template rendering engine. It can be considered a “finished product”. You cannot use something like the {% url tag to dynamically create that url.

So as referenced above, you’ve got two choices. You can put the full static url (e.g. /static/background-Pictures/light-mode-background.jpg) within the url definition.
Or, for more flexibility (and the potential reliability), or you can render the url within the template using the json_script tag to create the string used to assign to the document.body.style.backgroundImage attribute.

10

In javascript you would have the same issue with relative paths causing havoc though. Maybe you’ve been lucky to not be bitten by it before! I personally prefer to use absolute paths in these types of situations as far as possible. It’s just easier to reason about.