same button, each click performs another function... HOW? - html

Question

I have a website that has multiple languages, currently the language bar is displayed along the top of the site with a button for each language. What I would prefer is one button, click it once, the button image changes to a union jack flag, and english is called, press it again, and the button image changes to french, and the french language is called, etc etc..
Is this one button, multiple calls possible? can anyone give me a good place to start looking in to this?

Answer 1

Yes, it is possible.
Your html would look something like this:
<button id='changeLang' onclick='changeLang()'></button>
(Remember to set this to your default to begin with)
and your javascript:
var counter = 0;
function changeLang(){
var buttonDetails = document.getElementById('changeLang');
buttonDetails.innerHTML = "";
switch(counter){
case 0:
buttonDetails.innerHTML = "<img src='unionJack.png' />English";
counter +=1;
break;
case 1:
buttonDetails.innerHTML = "<img src='frenchFlag.png' />French";
counter +=1;
break;
case 2:
//continue like above
default:
counter = 0;
changeLang();
}
}
If you ever need another language, just add it to the switch.
Alternatively, change the case code to:
case 0:
buttonDetails.src = "unionJack.png";
counter +=1;
break;
And remove the line that says buttonDetails.innerHTML = ""; if all you want is an image.
To call a function to change the language you would simply add a function call to one of your switch cases like so:
case 0:
buttonDetails.innerHTML = "<img src='unionJack.png' />English";
counter +=1;
foo(bar); //just add your function call
break;