Javascript – Problems with JSON generated menu. The links are not clickable. Any ideas?

So, I made a website with different languages I pull from json files (e.g en.json, fr.json etc.). Of course I also wanted to translate the menu points:

        <div class="nav-container">
            <span class="logo lato-bold">DacHOW<i class="fa-regular fa-circle-question"></i></span>
            <nav class="nav">
                <ul class="nav-ul">
                    <li class="nav-link" ><a href="#home">HELLO</a></li>
                    <li class="nav-link" lang-attribute="m-first-steps"><a href="#first-steps"></a></li>
                    <li class="nav-link" lang-attribute="m-asylum"><a href="#asylum"></a></li>
                    <li class="nav-link" lang-attribute="m-financial-aid"><a href="#financial-aid"></a></li>
                    <li class="nav-link" lang-attribute="m-healthcare"><a href="#healthcare"></a></li>
                    <li class="nav-link" lang-attribute="m-education"><a href="#education"></a></li>
                    <li class="nav-link" lang-attribute="m-support"><a href="#support"></a></li>
                    <li class="nav-link" lang-attribute="m-contacts"><a href="#contacts"></a></li>
                </ul>
            </nav>
            <span class="hamburger-menu material-symbols-outlined"><i class="fa-solid fa-bars"></i></span>
        
            <div class="dropdown-language container">
                <button class="dropbtn" id="dropbtn">
                    English
                  <i class="fa fa-caret-down" id="arrow"></i>
                </button>
                <div class="dropdown-content" id="dropdown-content">
                  <a href="index.html" onclick="changeLanguage('en')">English</a>
                  <a href="index.html" onclick="changeLanguage('fr')">French</a>
                  <a href="index.html" onclick="changeLanguage('ar')">Arabic</a>
                  <a href="#">Link 3</a>
                </div>
              </div> 
        </div>

When I noticed, I tried to find help from chat GPT who advised to add js functions to pull the menu content specifically. It did not help.

//          NAVIGATION          //


// Mobile Hamburger Navbar: opening on click
const hamburgerMenu = document.querySelector(".hamburger-menu");
const nav = document.querySelector(".nav");
// Hamburger Menu opens and closes when clicked 
hamburgerMenu.addEventListener("click", () => {
    nav.classList.toggle("active");
});

// When on mobile, once user clicked the menu point they want to go to, it closes
const navLinks = document.querySelectorAll('.nav-link a');
navLinks.forEach(function(link) {
  link.addEventListener('click', function() {
    nav.classList.remove('active');
  });
});





//      LANGUAGE DROPDOWN SELECTION BUTTON       //


// Language Dropdown 
const dropdownBtn = document.getElementById("dropbtn");
const dropdownMenu = document.getElementById("dropdown-content");
const toggleArrow = document.getElementById("arrow");

// Toggle dropdown function
const toggleDropdown = function () {
  dropdownMenu.classList.toggle("show");
  toggleArrow.classList.toggle("arrow");
};

// Toggle dropdown open/close when dropdown button is clicked
dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation();
  toggleDropdown();
});

// Close dropdown when dom element is clicked 
document.documentElement.addEventListener("click", function () {
  if (dropdownMenu.classList.contains("show")) {
    toggleDropdown();
  }
});




//      LANGUAGE SELECT/SAVE/CHANGE FUNCTIONALITY       //





// Function to save the language preference in localStorage
function setLanguagePreference(lang) {
    localStorage.setItem('language', lang);
}




// Function to update the site content based on selected language
function updateContent(langData) {
    document.querySelectorAll('[lang-attribute]').forEach(element => {
        const key = element.getAttribute('lang-attribute');
        element.textContent = langData[key];
    });
}



// Function to fetch language data from json files
async function fetchLanguageData(lang) {
    const response = await fetch(`languages/${lang}.json`);
    return response.json();
}









// CHAT GPT ADDED: Function to update the menu items with language-specific text
async function updateMenuItems(lang) {
    const langData = await fetchLanguageData(lang);
    const navLinks = document.querySelectorAll('.nav-link');

    navLinks.forEach((link, index) => {
        const menuItemKey = link.getAttribute('lang-attribute');
        const menuItemText = langData[menuItemKey];
        link.querySelector('a').textContent = menuItemText;
    });
}

// CHAT GPT ADDED: Call updateMenuItems() on page load
window.addEventListener('DOMContentLoaded', async () => {
    const userPreferredLanguage = localStorage.getItem('language') || 'en';
    await updateMenuItems(userPreferredLanguage);
});







// Function to change language from one to another 
async function changeLanguage(lang) {
    setLanguagePreference(lang);
    const langData = await fetchLanguageData(lang);
    updateContent(langData);

    // Update language displayed in the dropdown button 
    const languageNames = {
        'en': 'English',
        'fr': 'French',
        'ar': 'Arabic'
    };
    document.getElementById('dropbtn').innerHTML = `${languageNames[lang]} <i class="fa fa-caret-down" id="arrow"></i>`;
    
    // Change text direction based on the selected language
    if (lang === 'ar') {
        document.body.setAttribute('dir', 'rtl');
        } else {
        document.body.setAttribute('dir', 'ltr');
        }
}


// Call updateContent() on page load
window.addEventListener('DOMContentLoaded', async () => {
    const userPreferredLanguage = localStorage.getItem('language') || 'en';
    const langData = await fetchLanguageData(userPreferredLanguage);
    updateContent(langData);

    // Update language displayed in the dropdown button
    const languageNames = {
        'en': 'English',
        'fr': 'French',
        'ar': 'Arabic'
    };
    document.getElementById('dropbtn').innerHTML = `${languageNames[userPreferredLanguage]} <i class="fa fa-caret-down" id="arrow"></i>`;
    // Change text direction based on the preferred language
    if (userPreferredLanguage === 'ar') {
        document.body.setAttribute('dir', 'rtl');
    } else {
        document.body.setAttribute('dir', 'ltr');
    }
});

Please, do you have an idea how to make my navigation links clickable?

I think the problem is that the menu links are json generated so in the html the anchor links are empty. I added one not json generated and just put some text and it could be clicked.

I also tried Chat GPT but it was not too helpful.