CODEWITHSUNDEEP
javascript
jorge
jorge

Reputation: 21

how to change website language when clicking the link

I want to change the website I am building from English to Spanish. I found a youtube video that explains how to do it but it only changes website language when I click the refresh icon not when I click the link. I want it to change when I click the link. The youtube video is this one [1]: https://www.youtube.com/watch?v=PaJrDAmrOB4. The HTML and javascript are below. Thank you

HTML

<nav>
    <ul>
        <li><a href="#eng" data-reload>English</a></li>
        <li><a href="#es" data-reload>Spanish</a></li>
    </ul>
</nav>
<p id="title">
    budget website
</p>

javascript

var dataReload = document.querySelectorAll("[data-reload]");
var language = {
    eng:  {
        budgetWebsite: 'budget website'
    },

    es: {
        budgetWebsite: 'Sitio web de presupuesto'
    }
};

if(window.location.hash) {
    if(window.location.hash === "#es") {
        title.textContent = language.es.budgetWebsite;
    }
}


for (i = 0; i <= dataReload.length; i++) {
dataReload[i].onClick = function() {
location.reload(true);
};
}

Upvotes: 0

Views: 2723

Answers (1)

Palladium02
Palladium02

Reputation: 1171

I have taken a look at your problem and the youtube video. And I have come up with a slightly different approach. I added the data-change-language attribute to the anchor element and given them the value for the corresponding language.

<nav>
    <ul>
        <li><a href="" data-change-language="en">English</a></li>
        <li><a href="" data-change-language="es">Spanish</a></li>
    </ul>
</nav>
<p id="title">
    budget website
</p>

The JavaScript down below sets the default language to "en". When the page has loaded it will look if the language has been changed before and set it accordingly. Then it will attach an eventlistener to the anchor elements. So whenever someone clicks one of the anchor elements the changeLanguage function is called and the language is saved to the localstorage so if you reload the page or reopen the page the language is still set correctly. The changeLanguage function iterates over all keys in the languages object and picks out the elements in your page and changes their content.

let currentLanguage = "en";
let languages = {
  en: {
    title: "budget website"
  },
  es: {
    title: "Sitio web de presupuesto"
  }
}
  
document.addEventListener("DOMContentLoaded", () => {
  let storedLanguage = localStorage.getItem("language");
  if (storedLanguage) {
    changeLanguage(storedLanguage)
  } else {
    changeLanguage(currentLanguage)
  }
  [...document.querySelectorAll("[data-change-language]")].forEach((element) => 
 {
      element.addEventListener("click", (event) => {
      event.preventDefault();
      let language = element.getAttribute("data-change-language");
      localStorage.setItem("language", language);
      changeLanguage(language);
    })
  });
});

function changeLanguage(language) {
  let languageSet = languages[language];
  Object.keys(languageSet).forEach((id) => {
    document.getElementById(id).innerText = languageSet[id];
  });
}

Upvotes: 1

Related Questions