猫と遊ぶ　見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

ボタンで画像を切り替える

今日はクリックで画像切り替えに挑戦✊

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>クリックで画像切り替え</title>
</head>

<body>
  <input type="button" value="さくら" onclick="changePic('sakura.jpg')">
  <input type="button" value="かいじゅう" onclick="changePic('kaijyuu.jpg')">
  <input type="button" value="台湾プーさん" onclick="changePic('phoosan.jpg')">
  <div id="picdiv"></div>
  <script>
    function changePic(filename) {
      var pictureDiv = document.getElementById("picdiv");
      pictureDiv.innerHTML = "<img src=" + filename + ">";
    }
  </script>
</body>

</html>

先日は関数のみだったけど、
今回は関数に加え、引数も登場。

引数となるのは、
画像のファイル名。
で、filenameにそれぞれ表示させるファイル名が入る、という感じ。

ほんで、それをもらう関数が、
changePicとなっている。
（画像切り替えの関数なんてあるんだ～）

このプログラムを実行してみると、
上から順に、

さくらをクリック！
f:id:msm20-chocolateee:20180816183123p:plain

かいじゅうをクリック！
f:id:msm20-chocolateee:20180816183153p:plain

台湾プーさんをクリック！
f:id:msm20-chocolateee:20180816183217p:plain

これは以前台湾に旅行に行ったときに撮った
だれかさん家のドアの絵。
かわいい～♪　てかクオリティ高し(笑)