私はコーディングが新しく、ローカル変数とグローバル変数の違いを理解しようとしています。私はボタンを押して画像を切り替えることができる画像ギャラリーを作成しようとしていました。関数内にイメージ変数をローカル変数として置くことで、動作するようになりました。しかし、私は関数の外に置く場合、グローバル変数、それは動作しません。何故ですか?ここでjavascriptのローカル変数とグローバル変数
は私のhtmlです:私はそれが動作するようになったとき、ここで
<button onclick="previous_image();"></button>
<img src="image1.jpg" alt="Image gallery" id="image"/>
<button onclick="next_image();"></button>
は私のJavascriptです:
ここvar image_tracker = "a";
function previous_image(){
var image = document.getElementById("image");
switch(image_tracker){
case("a"):
image.src = "image3.jpg";
image_tracker = "c";
break;
case("c"):
image.src = "image2.jpg";
image_tracker = "b";
break;
case("b"):
image.src = "image1.jpg";
image_tracker = "a";
break;
}
}
function next(){
var image = document.getElementById("image");
switch(image_tracker){
case("a"):
image.src = "image2.jpg";
image_tracker = "b";
break;
case("b"):
image.src = "image3.jpg";
image_tracker = "c";
break;
case("c"):
image.src = "image1.jpg";
image_tracker = "a";
break;
}
}
は、それがうまくいかなかったとき、私のjavascriptです:
var image_tracker = "a";
var image = document.getElementById("image");
function previous_image(){
switch(image_tracker){
case("a"):
image.src = "image3.jpg";
image_tracker = "c";
break;
case("c"):
image.src = "image2.jpg";
image_tracker = "b";
break;
case("b"):
image.src = "image1.jpg";
image_tracker = "a";
break;
}
}
function next(){
switch(image_tracker){
case("a"):
image.src = "image2.jpg";
image_tracker = "b";
break;
case("b"):
image.src = "image3.jpg";
image_tracker = "c";
break;
case("c"):
image.src = "image1.jpg";
image_tracker = "a";
break;
}
}
はたぶんあなたの要素は準備ができていませんか? 'window.onload'関数ラッパーを試してみるか、'
' – Justinas' var image = document.getElementById( "image"); 'の最後にコードを置いてください。この関数内では、イメージオブジェクトがDOM内に存在した後に関数を実行するため実行されます。 'var image 'を実行することで解決できます。 window.onload = function(){image = document.getElementById( "image"); } ' - 別のノートでは、' type = "button" 'をボタンに追加します。一部のブラウザでは、ページを提出します – mplungjan
1- DOMから要素を選択できるようにドキュメントを準備する必要があります。 2-関数内で使用されているすべての変数を定義した後、関数を呼び出す必要があります。 –