LemonteaのUnity部屋

C#とかのお話です~

JavaScript入門 画像を動的に変更

こんにちは。レモンティーです。

今回は画像を動的に変更します。

使うのはgetElementByIdです。

let x = getElementById("testid");

これでimgタグを取得して、srcプロパティにある画像のPathを変更すればOKです。


picture


サンプルのコードはこうなっています。
はてなフォトライフにアップした画像で試していますが、pathが長いので省略してpathとしています。)
HTML

<img id="Img1" src="path" width="320" height="240" border="0" alt="picture">

<button type="button" onclick="changePic()">サンプル</button>

JS

<script>

var path = new Array("path1","path2","path3","path4");

var index = 0;
var pic = document.getElementById("Img1");
function changePic(){
  pic.src = path[index%4];
  index += 1;
}
</script>


今回はこれでおしまいです。
www.sawalemontea.com