##このプロジェクトを作った目的
とあるプロジェクトの雛形を実験してみたかった
投稿者は未経験からIT業界にはいったので、最初はつまづいたな〜という思いから一応記事にしておきます。
##前提条件
webデザイナーではないのでclassの命名規則とかは見逃してください。
あとコードの綺麗さとかはすみませんが汚いです！！！！涙
##何をつくるか
シンプルに以下3つの要件を設定。3つ以下の細かいことは無視。
・スマホ用の解像度（横505px,縦766px）
・画像の下にボタンを複数配置する（8個）
・ボタンをクリックすると画面に表示されている写真が変わる
##完成イメージ
githubですコードをダウンロードすればそのままgetできるはずです。
https://github.com/i-am-ethan/pushBtn_changePics
##スタート！！
###(1)いらすとやで画像を調達
今回は、８種類の動物の画像をゲットする
https://www.irasutoya.com/search/label/%E5%8B%95%E7%89%A9
ボタンは自分でpowerpointで作りました。
githubで公開したので勝手にdownloadしてください。
###(2)プロジェクトファイルを作る
てきとうな名前でディレクトリをつくって、いつものように三種の神器を作成。
・index.html
・style.css
・main.js
ファイルの構造はこんな感じです
###(4)index.html
とりあえず、画像1枚とその下にボタンが並ぶようなスタイルを記述します。
まじで見にくいですがすみません。
<body>
<div class="wrap">
<div class="main">
<div class="pics">
//画像を配置
<img class="pic" id="pics" onclick="" src="img/arupaka.png" alt="">
</div>
<div class="btns">
//ボタンたちを配置
<img class="btn" id="btn1" src="btn/1.png" height="50px" width="50px">
<img class="btn" id="btn2" src="btn/2.png" height="50px" width="50px">
<img class="btn" id="btn3" src="btn/3.png" height="50px" width="50px">
<img class="btn" id="btn4" src="btn/4.png" height="50px" width="50px">
<img class="btn" id="btn5" src="btn/5.png" height="50px" width="50px">
<img class="btn" id="btn6" src="btn/6.png" height="50px" width="50px">
<img class="btn" id="btn7" src="btn/7.png" height="50px" width="50px">
<img class="btn" id="btn8" src="btn/8.png" height="50px" width="50px">
</div>
</div>
</div>
//jsの読み込みです
<script src="main.js"></script>
</body>
###(5)style.css
cssは好きなようにやってください
###(6)main.js
jsファイル内のメソッドです。
こちらのidとsrcを変えてあげれば、他のボタンのクリックされた処理もできるとおもいます！
//"btn1"というIDを取得して、クリックしたらfunctionを実行する
document.getElementById("btn1").onclick = function(){
//"pics"というIDを取得して、そのsrcを"img/arupaka.png"に変更する
document.getElementById("pics").src="img/arupaka.png";
}
###(7)アロー関数バージョン
//"btn1"というIDを取得して、クリックしたらfunctionを実行する
document.getElementById("btn1").onclick = () => {
//"pics"というIDを取得して、そのsrcを"img/arupaka.png"に変更する
document.getElementById("pics").src="img/arupaka.png";
}
###(8)コードを短縮したい時
const pushBtn = (btn,src) => {
document.getElementById(btn).onclick = function(){
document.getElementById("pics").src=src;
}
}
pushBtn("btn3","img/hituzi.png")
pushBtn("btn4","img/kaba.png")
pushBtn("btn5","img/tori.png")
pushBtn("btn6","img/uma.png")
pushBtn("btn7","img/usi.png")
pushBtn("btn8","img/yagi.png")
以上！！