###前提・実現したいこと
・プログラミングを始めたばかりの初心者です。
・javascript以外の言語はわかりません。(HTML, CSSは勉強済み)
・3枚のtrainの写真を使ったスライダーを作りたい(train1,train2,train3)
・beforeボタンを押すと一つ前の写真に移動(train3 -> train2 -> train1 -> train3)
・afterボタンを押すと一つ前の写真に移動(train1 -> train2 -> train3 -> train1)
###発生している問題・エラーメッセージ
・スライドが変化しない
・OPTION1-3が自分で考えた回答コードだが、どれも機能しない
・option1-3がjavascriptのルールから考えた時になぜ機能しないのかわからないし、3つの違いがよくわからない
・本から持ってきた問題のため、回答はわかるのだが、なぜ自分のコードが機能しないのか、根本的なjavascriptの理解が足りていないため理解できずしっくりこない。
###該当のソースコード1
javascript
1 2var photos = ['train1.jpg', 'train2.jpg', 'train3.jpg']; 3 4var current = 0; 5 6var changeImage = function(num){ 7 if ( current + num >= 0 && current + num >= photos.length){ 8 current += num; 9 document.getElementById('#img').src = photos[current]; 10 } else if ( current + num = -1 ){ 11 document.getElementById('#img').src = photos[2]; 12 } else { 13 document.getElementById('#img').src = photos[0]; 14 } 15}; 16 17$(function(){ 18 $(#after).on('click',function(current){ 19 changeImage(1); 20 }); 21 22 $(#before).on('click', function(current){ 23 changeImage(-1); 24 }); 25}); 26 27
###該当のソースコード2
javascript
1var photos = ['train1.jpg', 'train2.jpg', 'train3.jpg']; 2 3var current = 0; 4 5var changeImage = function(num){ 6 if ( current + num >= 0 && current + num >= photos.length){ 7 current += num; 8 document.getElementById('#img').src = photos[current]; 9 } else if ( current + num = -1 ){ 10 document.getElementById('#img').src = photos[2]; 11 } else { 12 document.getElementById('#img').src = photos[0]; 13 } 14}; 15 16document.getElementById('prev').onclick = function() { 17 changeImage(-1); 18}; 19document.getElementById('next').onclick = function() { 20 changeImage(1); 21}; 22``` 23 24###該当のソースコード3 25``````javascript 26 27var photos = ['train1.jpg', 'train2.jpg', 'train3.jpg']; 28 29var current = 0; 30 31var changeImage = function(num){ 32 if ( current + num >= 0 && current + num >= photos.length){ 33 current += num; 34 document.getElementById('#img').src = photos[current]; 35 } else if ( current + num = -1 ){ 36 document.getElementById('#img').src = photos[2]; 37 } else { 38 document.getElementById('#img').src = photos[0]; 39 } 40}; 41 42 43$(function(current){ 44 $(#after).on('click',function(){ 45 changeImage(1); 46 }); 47 48 $(#before).on('click', function(){ 49 changeImage(-1); 50 }); 51}); 52 53```