<Javascript>連続データの切り替え表示ボタン開発
//なんか結構更新頻度高くなってるのは偶然です
実際の制作物
htmlのコード
htmlについては抜粋で記述します。
<button id="backforward" onclick="replacer(this)">backforward</button> <button id="forward" onclick="replacer(this)">forward</button> <img id="viewer" src="samp201807131300.png">
ここではid="viewer"の画像を切り替えることを目的とした実装を行っています。フロントで切り替えるならlinkのhrefとかのほうが実際に使うことが多いのではないかと思いますが、、
buttonにforardとbackforwardというidを付与しています。
今回はreplacerというスクリプトを実装しているのでそのスクリプトにクリックしたボタン自体の情報を渡しています。
Javascriptのコード
Javascriptのコードはこのような感じです。
var replacer = function(button) { //ボタンのID情報を取得 var trig = button.getAttribute('id'); //変更する要素の情報を取得 var pane = document.getElementById("viewer"); //リンク情報を切り出し var link = pane.src; //リンク情報から時刻を切り出し var time = Number(link.slice(-8, -4)); //リンク情報の相対パスを取得 if (trig == "forward") { //時刻情報ステップ処理(暫定) time+=15; //新規リンクの生成 var nlink = link.slice(0, -8) + time + ".png"; //生成したリンクに切り替え pane.setAttribute("src", nlink); } else if (trig == "backforward") { //時刻情報ステップ処理(暫定) time-=15; //新規リンクの生成 var nlink = link.slice(0, -8) + time + ".png"; //生成したリンクに切り替え pane.setAttribute("src", nlink); } }
基本的にやっていることはコメントのとおりです