Dynamic html and js

I'm creating a dynamic content loader with a menu for navigating between sections. Each tab loads its corresponding HTML and JavaScript file. However, I'm encountering redeclaration errors with variables in the JS files when switching tabs. when i try to go again in a section i was before i get this error

Uncaught SyntaxError: Identifier 'parcours' has already been declared (at script.js:1:1)".

How can I dynamically load and unload these scripts without conflicts?

the main html

<body>
    <!-- MENU -->
    <div id="menuConteneur">
        <div class="menuIcon on" id="etudeTravail" onclick="loadContent('etudeTravail/etudeTravail.html', 'etudeTravail/script.js')"></div>
        <div class="menuIcon off" id="projets" onclick="loadContent('projets/projets.html', 'projets/script.js')"></div>
        <div class="menuIcon off" id="about" onclick="loadContent('about/about.html', 'about/script.js')"></div>
    </div>
    <!-- DIV CONTENUE DYNAMIQUE -->
    <div id="contenu"></div>
    <script src="script.js" defer></script>
</body>

the main script :

let lastScript = null;

function loadScript(scriptUrl) {
    if (lastScript) {
        document.body.removeChild(lastScript);
    }

    const script = document.createElement('script');
    script.src = scriptUrl;
    script.defer = true;
    document.body.appendChild(script);

    lastScript = script;
}

function loadContent(page, scriptUrl) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', page, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('contenu').innerHTML = xhr.responseText;
            if (scriptUrl) {
                loadScript(scriptUrl);
            }
        }
    };
    xhr.send();
}
loadContent('etudeTravail/etudeTravail.html', 'etudeTravail/script.js');

one of the js

let parcours = document.querySelectorAll(".parcour");
parcours.forEach(parcour => {
    parcour.addEventListener("mouseover", function () {
        console.log("test2");
    })
});
console.log("test");

his html

<div class="parcour">1</div>
<div class="parcour">2</div>
<div class="parcour">3</div>

I've implemented a dynamic content loader with a menu that switches between sections by loading different HTML and JavaScript files. I expected the scripts to load and unload without errors. However, I'm facing redeclaration issues with variables when switching tabs. What solutions can help resolve this?

Solution

I'm encountering redeclaration errors with variables in the JS files when switching tabs. when i try to go again in a section i was before i get this error

As you are seeing, once you've declared a variable the first time via let (or const), you can't re-declare that variable.

However, both let and const have block scope.

This means, if they are re-declared in a separate block each time, you can re-declare the variables as many times as you wish.

Consequently, an elegant solution would be to run the script as an IIFE (Immediately Invoked Function Expression).

Example:

(() => {

  let parcours = document.querySelectorAll(".parcour");
  parcours.forEach(parcour => {
    parcour.addEventListener("mouseover", function () {
      console.log("test2");
    })
  });

  console.log("test");

})();

Essentially, this is a function which runs as soon as it is parsed.