Django unable to load svg file in external js file using static reference

Question

I need to load a svg file from my javascript code which I am including in my index.html. I understanding that jinja template cannot be used inside a js external file. And so as a workaround I am storing the same in my whiteLogo and logo variable which I am using in the js code.

But when I am running the server and on scrolling on the page I am getting error, that the resource cannot be found.

Not Found: /[object HTMLImageElement]
[04/May/2022 12:18:05] "GET /[object%20HTMLImageElement] HTTP/1.1" 404 2441

Where am I going wrong, am I loading the logo path correctly?

index.html

<script type="text/javascript">
    var whiteLogo = "{% static "app/images/logo/white-logo.svg" %}";
    var logo = "{% static "app/images/logo/logo.svg" %}";
</script>
<script src="{% static 'app/js/main.js' %}">></script>

main.js

window.onscroll = function () {
    var header_navbar = document.querySelector(".navbar-area");
    var sticky = header_navbar.offsetTop;

    var logo = document.querySelector('.navbar-brand img')
    if (window.pageYOffset > sticky) {
      header_navbar.classList.add("sticky");
      logo.src = logo;
    } else {
      header_navbar.classList.remove("sticky");
      logo.src = whiteLogo;
    }

    // show or hide the back-top-top button
    var backToTo = document.querySelector(".scroll-top");
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        backToTo.style.display = "flex";
    } else {
        backToTo.style.display = "none";
    }
};

EDIT :

Tried this

js

if (window.pageYOffset > sticky) {
      header_navbar.classList.add("sticky");
      logo.src = logoFromIndex;
    } else {
      header_navbar.classList.remove("sticky");
      logo.src = whiteLogoFromIndex;
    }

index.html

<script type="text/javascript">
    var whiteLogoFromIndex = {% static 'app/images/logo/white-logo.svg' %};
    var logoFromIndex = {% static 'app/images/logo/logo.svg' %};
</script>

Answer 1

We were using the variable logo which we created in our index.html to assign to logo variable created in the javascript file main.js

var logo = document.querySelector('.navbar-brand img')

That was a silly mistake from my side.

index.html

<script type="text/javascript">
    var whiteLogoFromIndex = "{% static "app/images/logo/white-logo.svg" %}";
    var logoFromIndex = "{% static "app/images/logo/logo.svg" %}";
</script>

<script src="{% static 'app/js/bootstrap.min.js' %}"></script>

main.js

window.onscroll = function () {
    var header_navbar = document.querySelector(".navbar-area");
    var sticky = header_navbar.offsetTop;

    var logo = document.querySelector('.navbar-brand img')
    if (window.pageYOffset > sticky) {
      header_navbar.classList.add("sticky");
      logo.src = logoFromIndex;
    } else {
      header_navbar.classList.remove("sticky");
      logo.src = whiteLogoFromIndex;
    }

    // show or hide the back-top-top button
    var backToTo = document.querySelector(".scroll-top");
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        backToTo.style.display = "flex";
    } else {
        backToTo.style.display = "none";
    }
};