0
228
ViewsHow to save whether a user clicked a button or not, and if so run a function
I have two functions translate_fr and translate_en, onClick when you click FR or EN the paragraphs are swapped either to english or french by grabbing their id's with inner.html
These two functions run on every html page, but obviously when refreshed or changing pages the onclick function reverts back to normal. So for instance if the user presses the FR button I want all the translate_fr functions on the other pages to run once the page loads, swapping the english paragraphs to french.
I need a way to store the users button click with local storage, and then a conditional statement saying if the user pressed EN run function translate_en else if FR then run function translate_fr.
Is this possible? I am VERY new to JavaScript and unfamiliar with local storage. I have no way how to do this. Here is the website on its domain lionkuts.ca for any other reference. I put two paragraphs as an example, though as you can see in the image I did this for every paragraph in the website.
function translate_en(){
document.getElementById("intro").innerHTML = `Here at Lion Kuts we are a cat only establishment that offers a full range of services from complete grooming, bathing to boarding. You and your pet will be thrilled to know that only professional, natural and biodegradeable products are used, any sensitivities or allergies will not be a problem.`;
}
function translate_fr(){
document.getElementById("intro").innerHTML = `Chez Coupe Lion, nous ne sommes qu'un chat établissement offrant une gamme complète de services du toilettage complet, de la baignade à l'embarquement.Vous et votre animal sera ravi de savoir que seul un professionnel, des produits naturels et biodégradables sont utilisés, tout les sensibilités ou les allergies ne seront pas un problème.`;
} <div class="wrapper3">
<button class="translate" id="click1" type="button"onclick="translate_en()">EN
</button>
<button class="translate" id="click2"
type="button" onclick="translate_fr()">FR
</button>
</div>
<p id="intro">
Here at Lion Kuts we are a cat only
establishment that offers a full range of services
from complete grooming, bathing to boarding. You and
your pet will be thrilled to know that only professional,
natural and biodegradeable products are used, any
sensitivities or allergies will not be a problem.
</p>1 answers
Answer question0
You can use Window.localStorage to save the current language, and then use Window.onload to check the language.
Window.localStorage
Window.onload
function translate_en(){
Window.localStorage.setItem("language", "EN");
//translate the web page
} //translate_fr is same, but with french
Window.onload = (e) => {
let language = Window.localStorage.getItem("language");
if(language === "EN"){
translate_en();
} else if(language === "FR"){
translate_fr();
} else {
translate_en();//Default (if null)
}
}