Category: javascript

I am having an issue where my content contained in a scroll view is unable to be scrolled at random intervals. It also specifically has an issue where if it is scrolled and it comes to a rest it is not able to be scrolled for anywhere from 3 to 10 seconds.

Currently it is formatted as follows:

<SafeAreaView>
  <KeyboardAvoidingView
    style={{ flex: 1 }}
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    keyboardVerticalOffset={50}
  >
    <ScrollView
      scrollContainerStyle={{ flex: 1 }}
      contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
    >
      {/* Content */}
    </ScrollView>
  </KeyboardAvoidingView>
</SafeAreaView>

What I am attempting to do is vertically center the content on the page, while allowing it to be pushed upward when necessary such as when the content expands or when the keyboard is pulled up.

I need to find a way to reformat and/or make a function that will take an object and select a random key:value from it, ensuring that the information I need from it is still accessible. Currently (to make sure everything else I had was working), I am just going through all of the object.

Right now I have this object (shortened for simplicity):

const questions = {
  1:{
    "What is the capital city of The United States of America?":{
      "London":false,
      "Richmond":false,
      "Washington DC":true,
      "Paris":false
    },
    "In what continent is Bangladesh located?":{
      "North America":false,
      "Africa":false,
      "Europe":false,
      "Asia":true
    }
  },

First key is what I’ve been using to organize each question by point value, then each question has each multiple choice answer and whether it is correct or incorrect.
Any changes to the object’s formatting are welcome, and informative responses would be appreciated since I am relatively knew to JS.
link to my repl

so lately I’m just testing out and learning routing using react-router-dom and I did make a Navbar with Subnav and its working and changing on navigation.

I have a problem with active-nav class on the link where subnav is.

Here is how I want it:

• clicking any sublinks activates the class on the parent link in this case: Services +

I know that it doesnt activates because the pathname isnt matching, but cant figure it out.

Also if theres a better way to do this I’m more than happy to learn.

Heres Navbar.js:

import { Link, useMatch, useResolvedPath } from "react-router-dom"
import React, { useState } from "react"
import './App.css';


export default function Navbar() {
    return (
        <header>
        <nav class="navbar">
            <ul>
                <NavbarLink to="/">Home</NavbarLink>
                <NavbarLink to="/a-word">A word</NavbarLink>
                <NavbarLink to="/services" sublinks={[
                    {to: "/services/bread", label: "Bread" },
                    {to: "/services/carrot", label: "Carrot" }
                ]}>Services +</NavbarLink>
            </ul>
        </nav>
    </header>
    )
}

function NavbarLink({ to, children, sublinks }) {
    const resolvedPath = useResolvedPath(to);
    const isActive = useMatch({ path: resolvedPath.pathname, exact: true });
    const [isShown, setIsShown] = useState(false);


    return (
        <li>
            <Link to={to} className={isActive ? "active-nav" : ""} onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
                {children}
            </Link>
            {sublinks && isShown && (
                <ul onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
                    {sublinks.map((sublink, index) => (
                        <li key={index}>
                            <Link to={sublink.to}>{sublink.label}</Link>
                        </li>
                    ))}
                </ul>
            )}
        </li>
    );
}

I have buttons in the Swiper slider component.
In the Safari browser only, the button’s click event on the fifth slider is not working.
I have carefully debugged this issue.
The main reason is that the event is only on the parent element.
I would appreciate it if you could fix this problem.
This issue occurs only in the Safari browser and only on the fifth slide.
I believe the main reason is the 3D effect rendering in the Safari browser.
Oh, I am using the cube effect.
After removing the cube effect, it started working.
I look forward to your updates.
Thank you.

Tried overriding CSS and declare JavaScript event in parent element.
But no effects.
And removed cube effects, after that, that worked correctly.
But I need to keep cube effect.
Thanks.

I have dynamically rendered a grid of data each with a modal pop up as if it were a product “quick view”. However, the alpha value of rgba varies dependent on how many different parts are rendered. Opacity does the same thing. I am assuming that the rendering logic makes it so the backgrounds are somehow stacked atop of each other resulting in darker for more parts and lighter for less.

Here is my modal’s styling:

.modal
    display: none
    position: fixed
    z-index: 1
    left: 0
    top: 0rem
    width: 100%
    height: 100%
    background-color: rgba(0,0,0, 0.03) !important
    
.modal.open
    display: flex
    justify-content: center
    align-items: center


.productModalCont
    display: flex
    position: absolute
    background-color: rgb(255, 255, 255)
    margin: 15% auto
    border: 1px solid #000
    
    width: 60%
    flex-direction: column

here is how I have it being rendered:

<div className="tlCont">
        <div className="gridCont">
          {gridData.map((item) => {
            return (
              <div className="gridItm" key={item.id}>
                <div className="itmCont">
                  <div
                    id="productModal"
                    className={`modal ${isModalOpen ? "open" : ""}`}
                    key={item.id}
                  >
                    
                    <div
                      className="productModalCont"
                      id={isModalOpen ? "open" : "not"}
                      ref={modalRef}
                    >
                      <div className="productModalHead">
                        <Close className="closeBttn" onClick={handleClose} />
                      </div>

here is my state/effect logic:

  const gridData = usePopulateGrid<GridContent>();

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [focusItem, setFocusItem] = useState<any>(null);
  const [detail, setDetail] = useState<string[]>([]);
  const [hasDetail, setHasDetail] = useState(false);
  const [carouselIndex, setCarouselIndex] = useState(0);
  const modalRef = useRef<any>();

  //

  useLayoutEffect(() => {
    if (isModalOpen) {
      if (focusItem?.hasDetail) {
        var arr: string[] = focusItem?.detailPicture?.split(";");
        arr?.unshift(focusItem?.pictureLnk);
        setDetail(arr);
        setHasDetail(true);
      }
    }
  }, [isModalOpen, hasDetail]);

Here is what I mean:

this component has 74 parts

this component has 27 parts

this component has 11 parts

this component has 4 parts

I’m writing my first every webapp while using JS for the first time (and html/css as a front end for first time in 15 years). It’s a recreation of a request system we had (server where it lived died unexpectedly) where they select a customer, I connect to the database and populate some fields on screen for them, they edit and submit, and I insert a new record into the database.

It will be hosted on a server only accessible on our intranet and only used by 4 people. Security is not a concern. I can force people to use firefox, edge, or chrome to use it if there are compatibility issues.

I’ve found two suggested solutions and neither work. Firstly ActiveXObject which to my understanding is obsolete and no longer supported. (is it still supported on IE? I might be able to convince my boss to allow that) Second node.js, but tutorials all say you start the connection with

const sql = require('mssql')

which gives my browser console this message Uncaught ReferenceError: require is not defined

Looking into that error I see that as individual browsers not supporting node.js so that’s a nogo as well. So, what can I use for my task?

Esto no es precisamente una pregunta, pero si le es de utilidad a alguien, este es un ejemplo de como calcular los días transcurridos entre dos fechas en PSeint:

Algoritmo calcular_diastranscurridos
    Definir dia_Inicial,mes_Inicial,an_Inicial,dia_Final,mes_Final,an_Final,enero,febrero,marzo,abril,mayo,junio,julio,agosto,septiembre,octubre,noviembre,diciembre,dias_AnInc,dias_Hastafechainc,dias_TotalesAnInc,total_Anfinal,dias_Hastamesfinal,dias_Totalesfinales,dias_Transcurridos Como Entero
    // Variable que calcula días extra por año 
    Definir dias_bis,ajuste_Diasbis como real
    // dias acumulador por cada mes
    enero<-31; febrero<-59; marzo<-90; abril<-120; mayo<-151; junio<-181; julio<-212; agosto<-243; septiembre<-273; octubre<-304; noviembre<-334; diciembre<-365;
    
    //Ingresar fecha inical
    Escribir "A continuación se te pedira la fecha inicial, primero se te pedirá el año, después el mes y por último el día";
    Escribir "Ingrese el año (aaaa)";
    Leer an_Inicial
    Escribir "Ingrese el mes (mm)";
    Leer mes_Inicial;
    Escribir "Ingrese el día (dd)";
    Leer dia_Inicial;
    Escribir "La fecha inicial es ",dia_Inicial,"/",mes_Inicial,"/",an_Inicial,"!";
    Escribir " ";
    //Ingresar fecha Final
    Escribir "A continuación se te pedira la fecha final, de igual forma, primero se te pedirá el año, después el mes y por último el día";
    Escribir "Ingrese el año (aaaa)";
    Leer an_Final
    Escribir "Ingrese el mes (mm)";
    Leer mes_Final;
    Escribir "Ingrese el día (dd)";
    Leer dia_Final;
    Escribir "La fecha final es ",dia_Final,"/",mes_Final,"/",an_Final,"!";
    Escribir " ";
    
    //Días hasta 31 de diciembre del año inicial
    
    // Paso uno, verificar si el año es bisiesto
    si (an_Inicial/4) = 0 entonces dias_AnInc<-366
        Sino dias_AnInc<-365
    FinSi
    
    si mes_Inicial=1 entonces dias_Hastafechainc <- dia_Inicial
    Sino 
        Si mes_Inicial=2 entonces dias_Hastafechainc <- enero + dia_Inicial
        SiNo
            Si mes_Inicial=3 entonces dias_Hastafechainc <- febrero + dia_Inicial
            SiNo
                Si mes_Inicial=4 entonces dias_Hastafechainc <- marzo + dia_Inicial
                SiNo
                    Si mes_Inicial=5 entonces dias_Hastafechainc <- abril + dia_Inicial
                    SiNo
                        Si mes_Inicial=6 entonces dias_Hastafechainc <- mayo + dia_Inicial
                        SiNo
                            Si mes_Inicial=7 entonces dias_Hastafechainc <- junio + dia_Inicial
                            SiNo
                                Si mes_Inicial=8 entonces dias_Hastafechainc <- julio + dia_Inicial
                                SiNo
                                    Si mes_Inicial=9 entonces dias_Hastafechainc <- agosto + dia_Inicial
                                    SiNo
                                        Si mes_Inicial=10 entonces dias_Hastafechainc <- septiembre + dia_Inicial
                                        SiNo
                                            Si mes_Inicial=11 entonces dias_Hastafechainc <- octubre + dia_Inicial
                                            Sino 
                                                Si mes_Inicial=12 entonces dias_Hastafechainc <- noviembre + dia_Inicial
                                            FinSi
                                        FinSi
                                    FinSi
                                FinSi
                            FinSi
                        FinSi
                    FinSi
                FinSi
                
            FinSi
            
        FinSi
        
    FinSi;
    FinSi;
    
    Si (an_Inicial/4) = 0 entonces 
        dias_Hastafechainc<-dias_Hastafechainc+1
    Sino 
        dias_Hastafechainc<-dias_Hastafechainc+0
    FinSi
    
    dias_TotalesAnInc <- dias_AnInc - dias_Hastafechainc;
    
    // Hola Profesora Rebecca, hasta el momento solo he calculado el total de días entre la fecha inicial y el 31 de diciembre del año fecha inicial, ahora calcularé el total de días entre el primero de enero del año siguente al año de la fecha inicial y hasta la fecha final, separé el cálculo en dos pasos para simplificarlos
    
    total_Anfinal<- an_Final - (an_Inicial+1);
    
    si mes_Final=1 entonces dias_Hastamesfinal <- dia_Final
    Sino 
        Si mes_Final=2 entonces dias_Hastamesfinal <- enero + dia_Final
        SiNo
            Si mes_Final=3 entonces dias_Hastamesfinal <- febrero + dia_Final
            SiNo
                Si mes_Final=4 entonces dias_Hastamesfinal <- marzo + dia_Final
                SiNo
                    Si mes_Final=5 entonces dias_Hastamesfinal <- abril + dia_Final
                    SiNo
                        Si mes_Final=6 entonces dias_Hastamesfinal <- mayo + dia_Final
                        SiNo
                            Si mes_Final=7 entonces dias_Hastamesfinal <- junio + dia_Final
                            SiNo
                                Si mes_Final=8 entonces dias_Hastamesfinal <- julio + dia_Final
                                SiNo
                                    Si mes_Final=9 entonces dias_Hastamesfinal <- agosto + dia_Final
                                    SiNo
                                        Si mes_Final=10 entonces dias_Hastamesfinal <- septiembre + dia_Final
                                        SiNo
                                            Si mes_Final=11 entonces dias_Hastamesfinal <- octubre + dia_Final
                                            Sino 
                                                Si mes_Final=12 entonces dias_Hastamesfinal <- noviembre + dia_Final
                                                FinSi
                                            FinSi
                                        FinSi
                                    FinSi
                                FinSi
                            FinSi
                        FinSi
                    FinSi
                    
                FinSi
                
            FinSi
            
        FinSi;
    FinSi;
    
    dias_Totalesfinales <- (total_Anfinal*365)+dias_Hastamesfinal;
    
    ajuste_Diasbis <- Trunc(total_Anfinal / 4); // Para redondear el número de días bisiestos y poderlos sumar con un tipo de variable Entero
    
    dias_Totalesfinales <- dias_Totalesfinales + ajuste_Diasbis
    
    // Calculo final de días transcurridos
    
    dias_Transcurridos <- dias_TotalesAnInc + dias_Totalesfinales;
    
    Escribir "los dias transcurridos entre ",dia_Inicial,"/",mes_Inicial,"/",an_Inicial," y ",dia_Final,"/",mes_Final,"/",an_Final," es ",dias_Transcurridos," días aproximadamente!";
    
    // Alumnno = Hanssel Arnulfo Nuñez Castañeda
FinAlgoritmo

Compartir la solución a un problema que no pude encontrar en otros foros, quizá alguien ya lo haya compartido, pero no pude dar con un ejemplo, por ende, pensé podría ser de ayuda compartir mi proceso

I am a beginner in the django programming language who please need some assistance. I have a data which after validation of my form displays a success message: “Operation completed successfully” from the return httpReponse but does not refresh the page. However, by adding this script in the form <form hx-post=”{{ request.path }}” class=”modal-content” hx-on=”htmx:afterRequest:location.reload()”> tag, the dataTable is refreshed but success message is not displayed

views.py

def index(request):
    all_person = Personne.objects.all()
    context = {'all_person': all_person}
    return render(request, 'index.html', context)

    def add_personne(request):
    if request.method == "POST":
        form = PersonneForm(request.POST)
        if form.is_valid():
              form.save()
              return HttpResponse(status=204,
                                headers={'HX-Trigger': json.dumps({
                                         "personList": None,
                                        "showMessage": "Opération effectuée avec succès",
                                     })  
                                })
            
    else:
        form = PersonneForm()
    return render(request, 'form_personne.html', {'form':form})
    
        
                                                                                                         
<---------------------------- Début index.html ------------------------------------------->

index.html

    {% extends "base.html" %}

{% block title %}Tableau-Dynamique{% endblock title %}

{% block content %}

<div class="col md-12">
    <button type="button" class="btn btn-primary" hx-get="{% url 'add_personne' %}" hx-target="#dialog"
        style="width:300px;">
        Add New
    </button>

</div>
<br>
<h3 class="mt-3">Option de recherche</h3>

<!--HTML table with student data-->


<table id="tableID" class="display">
    <thead>
        <tr>
            <th class="px-2 py-2 text-center">N°</th>
            <th class="px-2 py-2 text-center">Nom</th>
            <th class="px-2 py-2 text-center">Age</th>
        </tr>
    </thead>

    <tbody>
        {% for personne in all_person %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{personne.nom}}</td>
            <td>{{personne.age}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>


{% endblock content %}

{% block ScriptBlock %}

<script>
    $(document).ready(function () {

        var personDataTable = $("#tableID").DataTable({
            language: {
                "url": 'https://cdn.datatables.net/plug-ins/2.0.3/i18n/fr-FR.json'
            },

            "aLengthMenu": [[3, 5, 10, 25, -1], [3, 5, 10, 25, "All"]],
            "iDisplayLength": 3
        });

        
    });

    {% endblock ScriptBlock %}

<---------------------------- Fin index.html ------------------------------------------>

I’m new to JS and my script isn’t running when I use yield, don’t know what the problem is..

Here’s the script:

the script:

I’m basically trying to make my script check if the pixel below is empty, then wait until not the pixel below it is empty then run the script below it.

I am trying to find the correct syntax to add a data attribute to an HTML select option.

I have a lot pre-existing code that uses the following method to add options to a select:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <select name="ordertype" id="ordertype"></select>
</body>
    <script>
        var thisElement = document.getElementById('ordertype');
        var optionNew;
        optionNew = document.createElement("option");
        optionNew.text = "test text;
        optionNew.value = "0";
        thisElement.add(optionNew, null);
    </script>
</html>

https://jsfiddle.net/2g67pkxr/

This result is:

<select name="ordertype" id="ordertype">
    <option value="0">test text</option>
</select>

I would like to adda data attribute to produce the following:

<select name="ordertype" id="ordertype">
    <option data-mytest="a1234" value="0">test text</option>
</select>

Is this possible using my existing method?

First, take a look at the following code:

window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

.top-line {
    width: 7px;
    height: 100%;
    position: absolute;
    bottom: auto;
    left: 0;
    z-index: 2000;
    background-color: #f00;
    border-radius: 0;
    animation: bottom-line 1s linear;
    -webkit-animation: bottom-line 1s linear;
    -moz-animation: bottom-line 1s linear;
    -o-animation: bottom-line 1s linear;
    -ms-animation: bottom-line 1s linear;
}

@keyframes bottom-line {
    to {
      background-color: #f00;
      height: 0%;
    }
  }

 :root .top-line {
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

<div class="top-line"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

As you can see in the code above, the left navigation bar starts moving with the main page scroll.

But this movement is wrong. Because the left scrollbar reaches the end before the main page scroll reaches the end, and I also want the left scrollbar to be 0% at first (hidden) and then when the main scroll starts moving from top to bottom, the left scrollbar moves up from bottom to top in the opposite direction of the main scroll.

I’m currently working as a front-end developer and wishes to switch to full stack development. So, what are frameworks I should learn for back-end development?

I’m expecting to be a full-fledged full stack developer. How can I levitate my skills from front-end to full stack development?

How to scroll every 4 div specifically, with side scrolling buttons?

On a previous question I asked about how to loop and simplify codes of multiple side scrolling buttons in every overflow-x: How to loop and simplify code of multiple side scrolling buttons that scrolls specific row in javascript?

Now with this answered by Elna Haim, I am asking for help, to anyone knowledgeable in javascript on how is it possible to scroll every 4 div specifically and specifically stops and fits the 4 boxes in it when next and back button is clicked.

It can scroll using data-scroll=”1280″ but every time the screen size changes the scrolling gets broken too, and you will be able to see the div getting cut in half on the code below.

Also there’s a problem in the margin not triggering in the code snippet, I don’t know why.

const nextbtns = document.querySelectorAll('.next')
const backbtns = document.querySelectorAll('.back')

for (let nxt of nextbtns) {
    nxt.addEventListener("click", () => {
      const con = nxt.getAttribute("data-con");
      const target = nxt.getAttribute("data-scroll");
      document.querySelector(`#${con}`).scrollLeft += parseInt(target, 10);
    });
}

for (let bck of backbtns) {
    bck.addEventListener("click", () => {
      const con = bck.getAttribute("data-con");
      const target = bck.getAttribute("data-scroll");
      document.querySelector(`#${con}`).scrollLeft -= parseInt(target, 10);
    });
}

.row {
width: 100%;
height: 270px;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.container {
overflow-x: hidden;
white-space: nowrap;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
transition: scroll-behavior .5s ease-in-out;
}
.box {
width: 24%;
height: 180px;
background-color: #171717;
border-radius: 20px;
display: inline-block;
margin-right: 14;
}

.btns button {
--color: #202020;
background-color: #202020;
padding: 8px 17.5px 12px 17.5px;
border: 3px solid var(--color);
color: grey;
border-radius: 50px;
font-family: 'Arial Black';
position: relative;
bottom: 0px;
}

<html>
  <body>
<div class="row">
  <a class="btns">
    <button type="button" class="back" data-con="con" data-scroll="1321">&#8249</button>
    <button type="button" class="next" data-con="con" data-scroll="1321">&#8250</button>
  </a>
  <div class="container" id="con">
    <center>
      <div class="box">
      </div><div class="box">
      </div><div class="box">
      </div><div class="box">
      </div><div class="box">
      </div><div class="box">
      </div><div class="box">
      </div><div class="box">
      </div>
    </center>
  </div>
</div>
  </body>
</html>

For the jsfiddle: https://jsfiddle.net/c0f9da82/
The margin is still not working I guess it would only work if codes are saved locally.

Thanks Alot to Elna Haim for answering the previous question and is looking to answer this question again! If anyone else can help answer the question it would be Greatly appreciated!

Also I have another question in: Anyone around Good at both Javascript and Youtube api?, I am using lite-youtube js and I am confused in adding an eventlistener for onStateChange Where I am using lite youtube js by paulirish on github, and asked how is it possible to create an event listener to get the onStateChange end parameter. Thank you very much in advance! to everyone looking to answer my questions!

I am trying to build a Line Chart for my React application. I want to get a sliding window effect in the line chart. I tried the following code but the graph doesn’t slide on the x-axis. I get the data which i want to update from an api call and share the data using react context.

function ChartTest() {
  const data = useContext(DataContext);
  const [labels, setLabels] = useState([]);
  const [energyCost, setEnergyCost] = useState([]);

  useEffect(() => {
    if (Object.keys(data).length > 0) {
      const newData = Object.entries(data).map(([key, value]) => ({
        y: value.Total
      }));
      const newLabels = Object.entries(data).map(([key, value]) => Date.parse(value.Time));
      setEnergyCost(newData);
      setLabels(newLabels)
    }
  }, [data]);

  const options = useMemo(() => ({
    chart: {
      type: 'area',
      events: {
        load: function () {
          var series = this.series[0];
          let i = 0;
          setInterval(function () {
            if (i < energyCost.length) {
              var x =  labels[i],
                  y = energyCost[i];
              series.addPoint([x, y], true, true);
              i++;
            }
          }, 1000);
        }
      }
    },
    xAxis: {
      type: 'datetime',
    },
    tooltip: {
      pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
    },
    plotOptions: {
      area: {
        pointStart: 1940,
        marker: {
          enabled: false,
          symbol: 'circle',
          radius: 1,
          states: {
            hover: {
              enabled: true
            }
          }
        }
      }
    },
    series: [{
      name: 'Energy Cost',
      data: energyCost
    }]
  }), [energyCost]);

  return (
    <HighchartsReact
     highcharts={Highcharts}
     options={options}
    />
  )
}

export default ChartTest;

I tried to create an array to slice the data but that doesn’t work. Maybe I did it wrong. I am a bit new to JavaScript. Is there any way to fix it ?

I’m having an issue syncing the Django admin panel theme with the application’s side of the theme…Whenever I switch to Light mode from Dark mode on the app side, it changes to Auto and it should rather switch to Dark mode and vice versa. The issue persists on the admin side as well for some reason. If I switch from Light mode to Dark mode whilst in the admin panel and refresh the application’s side, it changes it to Light mode? It’s quite odd.

I tried troubleshooting it and what I could find was an error pointing at theme.js which is a file part of the admin panel.

It seems the problems stems from this file…

theme.js

'use strict';
{
    window.addEventListener('load', function(e) {

        function setTheme(mode) {
            if (mode !== "light" && mode !== "dark" && mode !== "auto") {
                console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
                mode = "auto";
            }
            document.documentElement.dataset.theme = mode;
            localStorage.setItem("theme", mode);
        }

        function cycleTheme() {
            const currentTheme = localStorage.getItem("theme") || "auto";
            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

            if (prefersDark) {
                // Auto (dark) -> Light -> Dark
                if (currentTheme === "auto") {
                    setTheme("light");
                } else if (currentTheme === "light") {
                    setTheme("dark");
                } else {
                    setTheme("auto");
                }
            } else {
                // Auto (light) -> Dark -> Light
                if (currentTheme === "auto") {
                    setTheme("dark");
                } else if (currentTheme === "dark") {
                    setTheme("light");
                } else {
                    setTheme("auto");
                }
            }
        }

        function initTheme() {
            // set theme defined in localStorage if there is one, or fallback to auto mode
            const currentTheme = localStorage.getItem("theme");
            currentTheme ? setTheme(currentTheme) : setTheme("auto");
        }

        function setupTheme() {
            // Attach event handlers for toggling themes
            const buttons = document.getElementsByClassName("theme-toggle");
            Array.from(buttons).forEach((btn) => {
                btn.addEventListener("click", cycleTheme);
            });
            initTheme();
        }

        setupTheme();
    });
}

Here’s the Dark mode file used on the application side to switch between the modes:

const modeLink = document.getElementById('bg_mode');
const body = document.body;
const modeIcon = document.getElementById('mode-icon');
const modeText = document.getElementById('mode-text');

modeLink.onclick = function () {
    if (localStorage.getItem("theme") === "dark-theme") {
        localStorage.setItem("theme", "light-theme");
        modeIcon.src = "/public/images/moon.png";
        modeText.textContent = "Dark mode";
        location.reload();

    } else {
        localStorage.setItem("theme", "dark-theme");
        modeIcon.src = "/public/images/sun.png";
        modeText.textContent = "Light mode";
        location.reload();
    }
}

Does it perhaps overwrite localStorage using the variable? Any tips would be highly appreciated!!