Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Toggle Button

Avatar

Level 2

Hi all, 

 

I am currently trying to create a toggle button that will display "English" when I click on the English button or "French" when I click on the French button. How can I set up the English button so when it is clicked it shows the English page and when the French button is clicked it shows the French page? 

1 Reply

Avatar

Community Advisor

Hello @StrawHatM23 

Here is a sample code for you to start.

<script>
function setLang(lang){
const urlParams = new URL(window.location.href);
urlParams.searchParams.set('l', lang);
window.location.href = urlParams;
}
</script> 
<%
var englishLang={text1:"Hello",text2:"World"};
var frenchLang={text1:"Bonjour",text2:"Monde"};
var selectedLang=ctx.vars.lang;
if(selectedLang == 'fr'){ 
	 var userLang=frenchLang; 
}else{ 
	var userLang=englishLang; 
}
%>
 <button onClick="setLang('en')">English</button> 
<button onClick="setLang('fr')">French</button> 
 <%= userLang.text1 %> <%= userLang.text2 %>

You will have to add a parameter in WebApp properties with the name as l and then create a variable with name lang.