<Javascript>連続データの切り替え表示ボタン開発

プログラミング(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);
    }
}

基本的にやっていることはコメントのとおりです