JavaScriptの繰り返しボタン：押した回数を数えて実行結果を元に戻すプログラム

サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。onclick自体はHTMLの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにCSSを付けて作成できるだろう。HTMLとJavaScriptでボタンを作成するピンクの躑躅の花の写真

押すと画像が二枚目に切り替わる。サンプルのソースコードHTML<img id="change-images" src="一枚目の画像URL" data-second-image="二枚目の画像URL"> <input type="button" value="ボタン" onclick="changer()">JavaScriptfunction changer(){ var chg = document.getElementById("change-images"); chg.setAttribute("src", chg.dataset.secondImage); }HTMLのinputのonclickからJavaScriptのfunctionが発動してサイトの画像タグのsrc属性の一枚目の画像URLをdata属性に用意した二枚目の画像URLへ置き換えるプログラムが実行されている。このままだとボタンは、一回、押すと止まってしまって、二回目以降、押しても何も起きなくなるのが心許ない。画像を切り替える場合など、ボタンで変更したコンテンツを元に戻せる方が全て閲覧可能だから利便性が高い。方法を考えるともう一つ同じように二枚目から一枚目へと切り替えるボタンを追加するのが簡単で、ボタンを画像毎に対応させられる利点も持っているんだ。しかしデザインによってボタンを一つだけしか表示したくない場合は複数枚を切り替えて使えるようにしなくてはならない。functionで繰り返しボタンを作成する方法0回押すと回数を加算して表示する。サンプルのソースコードHTML<p> <span id="press-button">0</span>回 </p> <input type="button" value="ボタン" onclick="counter()">JavaScriptvar not = 0; function counter(){ not++; document.getElementById("press-button").innerHTML = not; }変数の「not」にinputのonclickのfunctionから「++」で押した回数を一つ加算しながら表示している。毎回、functionの実行結果が変わるから止まらずに使える繰り返しボタンになるんだ。ボタンを押した回数を実行結果に割り当てるピンクの躑躅の花の写真

押した分だけ二枚の画像を交互に切り替えて表示する。サンプルのソースコードHTML<img id="repeat-images" src="一枚目の画像URL" data-second-image="二枚目の画像URL"> <input type="button" value="ボタン" onclick="repeater()">JavaScriptvar notr = 0; var rpt = document.getElementById("repeat-images"); var dftr = rpt.getAttribute("src"); function repeater(){ notr++; if(notr % 2 !== 0) rpt.setAttribute("src", rpt.dataset.secondImage); else rpt.setAttribute("src", dftr); }ボタンのfunction内で、押した回数を捉えてからさらにifで条件付けて使用する画像URLを振り分けている。二枚の画像に対してボタンを押した回数を2で割った余りが0かどうかの奇数と偶数を振り分ける条件式を通して前者ならば二枚目の画像、後者ならば一枚目の画像を表示するようにした。ボタンを押す前のnotrと画像タグの内容のrptと画像URLのdrfrの三つの変数をfunctionの外側に初期値として記載している。notrはfunction内側の「notr++」から一つずつ加算されてrptも「.setAttribute」からsrc属性がifの奇数で入れ替わるけれどもdftrは全く変更されないために、いい換えるとグローバル変数として一枚目の画像URLを格納し続けながらifの偶数で取り込まれる。サンプルソースコードのJavaScriptはドット演算子を使うともっと短縮できるようになる。var notr = 0; var rpt = document.getElementById("repeat-images"); var dftr = rpt.src; function repeater(){ notr++; if(notr % 2 !== 0) rpt.src = rpt.dataset.secondImage; else rpt.src = dftr; }画像URLのsrc属性を入れ替えるsetAttributeメソッドのところをドット演算子の「.」に変更すると代入演算子の「=」によって必要な値を直ぐに変数へ送り込める。ボタンを押した回数に三つ以上のコンテンツを繰り返して対応させるには必要なコンテンツを用意すると共に条件式によってそれぞれの実行結果が繰り返しても互いに被らないようにしなくてはならないので、二つよりも複雑になるけれどもJavaScriptのプログラミングは合計数以下の差し引きで判定するのが易しいだろう。switchで複数のコンテンツを振り分ける方法ピンクの躑躅の花の写真

押した分だけ四枚の画像を次々と切り替えて表示する。サンプルのソースコードHTML<img id="connect-images" src="一枚目の画像URL" data-second-image="二枚目の画像URL" data-third-image="三枚目の画像URL" data-forth-image="四枚目の画像URL"> <input type="button" value="ボタン" onclick="connector()">JavaScriptvar notc = 0; var cnt = document.getElementById("connect-images"); var dftc = cnt.src; function connector(){ notc++; switch(4 - notc){ case 3: cnt.src = cnt.dataset.secondImage; break; case 2: cnt.src = cnt.dataset.thirdImage; break; case 1: cnt.src = cnt.dataset.forthImage; break; case 0: cnt.src = dftc; notc = 0; break; }}条件のswitchを使ってコンテンツの合計数の差し引きの値に個別のコンテンツを対応させる。ボタンを押した回数の「notc」はコンテンツの合計数に達したところから「0」に初期化して次から又同じように一つずつ繰り返して判定する。switchの条件式の数字がコンテンツの合計数で、caseの数字が合計数からボタンを押した回数を差し引いた値になっている。どんな数のコンテンツに対してもプログラミングの骨子は同じで、switchとcaseを合わせて記載すれば大丈夫だし、繰り返しボタンに汎用的に使えると思う。

関連ページ

コメント