スライドを作りたい、関数の使い方を整理したい

Question

###前提・実現したいこと
・プログラミングを始めたばかりの初心者です。
・javascript以外の言語はわかりません。(HTML, CSSは勉強済み）

・３枚のtrainの写真を使ったスライダーを作りたい(train1,train2,train3)
・beforeボタンを押すと一つ前の写真に移動(train3 -> train2 -> train1 -> train3)
・afterボタンを押すと一つ前の写真に移動(train1 -> train2 -> train3 -> train1)

###発生している問題・エラーメッセージ
・スライドが変化しない
・OPTION1-3が自分で考えた回答コードだが、どれも機能しない
・option1-3がjavascriptのルールから考えた時になぜ機能しないのかわからないし、３つの違いがよくわからない
・本から持ってきた問題のため、回答はわかるのだが、なぜ自分のコードが機能しないのか、根本的なjavascriptの理解が足りていないため理解できずしっくりこない。

###該当のソースコード1

var photos = ['train1.jpg', 'train2.jpg', 'train3.jpg'];

var current = 0;

var changeImage = function(num){
	if ( current + num >= 0 && current + num >= photos.length){
		current += num;
		document.getElementById('#img').src = photos[current];
	} else if ( current + num = -1 ){
		document.getElementById('#img').src = photos[2];
	} else {
		document.getElementById('#img').src = photos[0];
	}
};

$(function(){
	$(#after).on('click',function(current){
			changeImage(1);
	});

	$(#before).on('click', function(current){
			changeImage(-1);
	});
});

###該当のソースコード2

var photos = ['train1.jpg', 'train2.jpg', 'train3.jpg'];

var current = 0;

var changeImage = function(num){
	if ( current + num >= 0 && current + num >= photos.length){
		current += num;
		document.getElementById('#img').src = photos[current];
	} else if ( current + num = -1 ){
		document.getElementById('#img').src = photos[2];
	} else {
		document.getElementById('#img').src = photos[0];
	}
};

document.getElementById('prev').onclick = function() {
	changeImage(-1);
};
document.getElementById('next').onclick = function() {
	changeImage(1);
};
```

###該当のソースコード3
``````javascript

var photos = ['train1.jpg', 'train2.jpg', 'train3.jpg'];

var current = 0;

var changeImage = function(num){
	if ( current + num >= 0 && current + num >= photos.length){
		current += num;
		document.getElementById('#img').src = photos[current];
	} else if ( current + num = -1 ){
		document.getElementById('#img').src = photos[2];
	} else {
		document.getElementById('#img').src = photos[0];
	}
};


$(function(current){
	$(#after).on('click',function(){
			changeImage(1);
	});

	$(#before).on('click', function(){
			changeImage(-1);
	});
});

```

Comments

[coco_bauer]

Javascriptで操作されるHTMLを示して下さい。　HTMLがどうなっているのかが判らないと、コードを理解する事が出来ませんから。

[kei344]

質問フォームのタイトル横にある初心者マークを押すことで「初心者である」ということはわかりますので、本文に「初心者」と書かなくても大丈夫です。

Answer 1

// document.getElementById('#img')
// ↓
   document.getElementById( 'img' )

// $(#after).on('click',function(){});
// ↓
   $( '#after' ).on( 'click',function(){}); // beforeも同じく

インデントを付ける癖は付けたほうが良いです。自動で付けてくれるエディタなども有ると思うので、一度探してみてはいかがでしょう。また、下記のようなツールで整形する手段もあります。

【Online JavaScript beautifier】
http://jsbeautifier.org/

jQueryと通常のJavaScriptのDOM操作（getElementByIdなど）が混じっていますが、しばらくはどちらかのみでDOM操作を勉強されるほうが混乱は少ないと思います。

Comments

[HarunaMONMON]

アドバイスありがとうございます。
まずは、jsに絞って勉強しようと思います。
丁寧なご回答ありがとうございます。感謝いたします。