html - 同じボタンで、クリックするたびに別の機能が実行されます...どうやって？

Question

複数の言語を使用するWebサイトがあります。現在、言語バーがサイトの上部に表示され、各言語のボタンが表示されています。ボタンを1つクリックすると、ボタンの画像がユニオンジャックのフラグに変わり、英語が呼び出されてもう一度押すと、ボタンの画像がフランス語に変わり、フランス語が呼び出されます。

この1つのボタンで、複数回の呼び出しが可能ですか？誰かが私にこれを調べ始めるのに良い場所を与えることができますか？

Answer 1

はい、可能です。あなたhtmlはこのように見えるでしょう：

<button id='changeLang' onclick='changeLang()'></button>

（最初はこれをデフォルトに設定することを忘れないでください）

とあなたの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();
   }
}

別の言語が必要な場合は、それをスイッチに追加するだけです。

または、ケースコードを次のように変更します。

case 0:
   buttonDetails.src = "unionJack.png";
   counter +=1;
   break;

buttonDetails.innerHTML = "";そして、必要なのが画像だけであるかどうかを示す行を削除します。

言語を変更する関数を呼び出すには、次のようにスイッチケースの1つに関数呼び出しを追加するだけです。

case 0:
   buttonDetails.innerHTML = "<img src='unionJack.png' />English";
   counter +=1;
   foo(bar);     //just add your function call
   break;