Search
Question:
Why does my script work properly on Chrome, but not on Safari?

Problem

The following script is the code for a dark mode toggle on my website.


I don't really know Javascript (I only know Python), so writing this code was a challenge and it might be poorly written. But what it does is it checks for a session variable "is_dark_mode" using Django Templating Language, to check if the current user has previously set his view to light or dark mode, and then it proceeds to switch the Boolean for that variable and adds or removes a "dark-mode" class to the body of my HTML (which is how I'm switching styles when in dark mode).


It works fine in Chrome, but it doesn't work at all in Safari, and I don't know why. When using the JavaScript console, it throws an error:


SyntaxError: Unexpected token ';'


This SyntaxError is pointing to this line of code:


var darkMode = ;


Could someone give me a hand in figuring this out? I'm learning backend only, so I got no idea of how to solve this, and I've already tried googling it, with no success.


<script>

      document.addEventListener("DOMContentLoaded", function () {

        var modeToggle = document.getElementById("modeToggle");


        function setInitialDarkMode() {

          var darkMode = {{ request.session.is_dark_mode|default_if_none:"false"|lower }};

          modeToggle.checked = darkMode;


          if (darkMode) {

            document.body.classList.add("dark-mode");

          }

        }


        modeToggle.addEventListener("change", function () {

          var darkMode = modeToggle.checked;


          fetch("{% url 'toggle-mode' %}", {

            method: 'POST',

            headers: {

              'X-CSRFToken': '{{ csrf_token }}',

              'Content-Type': 'application/json',

            },

            body: JSON.stringify({ dark_mode: darkMode }),

          })

            .then(response => response.json())

            .then(data => {

              if (darkMode) {

                document.body.classList.add("dark-mode");

              } else {

                document.body.classList.remove("dark-mode");

              }

              console.log(data);

            })

            .catch(error => console.error(error));

        });


        setInitialDarkMode();


      });

</script>


Solution

another way of doing the same as mentioned earlier


function checkSessionVariable() {

  var darkMode = "{{ request.session.is_dark_mode|default_if_none:"false"|lower|default:"false" }}";

  if (darkMode === "true") {

    // for calling setInitialDarkMode() or setting the toggle to true

    setInitialDarkMode();

  }

}


document.addEventListener("DOMContentLoaded", function() {

  var modeToggle = document.getElementById("modeToggle");

  

  // Calling checkSessionVariable() function on page load

  checkSessionVariable();

  

  // put all other code


});


Answered by: >Afzal K.

Credit: >StackOverflow


Blog Links: 

>How to manage the Text in the container in Django?

>Fix webapp stops working issue in Django- Python webapp

>Creating a form in Django to upload a picture from the website

>Sending Audio file from Django to Vue

>How to keep all query parameters intact when changing page in Django?

>Solved: TaskList View in Django

>Implement nested serializers in the Django rest framework

>How to filter events by month in Django?

>Sorting the restframework in Django

>Ways to access instances of models in view in order to save both forms at once in Django

>What makes index.html have such kind of name in Django?

>Fix Module Not Found during Deployment- Django

>Creating a Django with existing directories, files, etc.?

>How to Read a CSV file with PHP using cURL?


Nisha Patel

Nisha Patel

Submit
0 Answers
Top Questions
10-10-2023

Address the N+1 problem in Django with prefetch

10-10-2023

Disabling default ordering in Django admin panel

15-12-2023

Solve Django save() is not properly saving my object issue

05-10-2023

Ways to implement Payout Functionality in Django with the help of Stripe API?

04-10-2023

Implement nested serializers in the Django rest framework

Related Questions

How to make a code executed after an entry is inserted, removed or updated?
img
Fix Module Not Found during deployment- Django
img
How to find an alternative way of Q object?
img
How to format date-time input in django?
img
Fix Module Not Found Error in Django
img