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);
};
}
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];
});
}