###前提・実現したいこと
教則本を読みながら、画像ビューアを作っています。
→ボタンを押すと画像が切り替わるようにしたいのですが、切り替わりません。
どこがおかしいでしょうか。
###発生している問題・エラーメッセージ
画像が切り替わらない
###該当のソースコード
JavaScript
1var pictNo = 1; 2var myImg = []; 3 4myImg[0] = document.createElement'img'); 5myImg[0].src = 'img/1.jpg'; 6myImg[1] = document.createElement'img'); 7myImg[1].src = 'img/2.jpg'; 8myImg[2] = document.createElement'img'); 9myImg[2].src = 'img/3.jpg'; 10myImg[3] = document.createElement'img'); 11myImg[3].src = 'img/4.jpg'; 12 13function revBtnClick(){ 14 pictNo--; 15 document.getElementById('no').innerHTML = 'No.'+ pictNo; 16 document.getElementById('pict').src = myImg[pictNo - 1].src; 17 18 if (pictNo === 1) { 19 document.getElementById('rev_btn').disabled = 'disabled'; 20 } else if (pictNo === 3){ 21 document.getElementById('fwd_btn').disabled = false; 22 document.getElementById('no').className = 'no1' ; 23 } 24} 25 26function fwdBtnClick(){ 27 pictNo++; 28 document.getElementById('no').innerHTML = 'No.'+ pictNo; 29 document.getElementById('pict').src = myImg[pictNo - 1].src; 30 31 if (pictNo === 4){ 32 document.getElementById('no').className = 'no2' ; 33 document.getElementById('fwd_btn').disabled = 'disabled'; 34 } else if (pictNo === 2){ 35 document.getElementById('rev_btn').disabled = false; 36 } 37} 38
###試したこと
HTMLはこれです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>簡易画像ビューワ</title> <link rel="stylesheet" href="viewer.css"> <script src="viewer.js"></script> </head> <body> <img id="pict" src="img/1.jpg"> <div id="no" class="no1">No.1</div> <button id="rev_btn" onclick="revBtnClick();" disabled="disabled">←</button> <button id="fwd_btn" onclick="fwdBtnClick();">→</button> </body> </html>
###補足情報(言語/FW/ツール等のバージョンなど)
回答2件
あなたの回答
tips
プレビュー