javascriptのローカル変数とグローバル変数

Question

私はコーディングが新しく、ローカル変数とグローバル変数の違いを理解しようとしています。私はボタンを押して画像を切り替えることができる画像ギャラリーを作成しようとしていました。関数内にイメージ変数をローカル変数として置くことで、動作するようになりました。しかし、私は関数の外に置く場合、グローバル変数、それは動作しません。何故ですか？ここで

は私の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; 
    } 

} 

Answer 1

使用このような何か：あなたがそれらを選択しようとすると、

window.onload = function() { 
    var image = document.getElementById("image"); 
}; 

Answer 2

この行が原因で2番目のコードが動作しない理由は、

var image = document.getElementById("image");

は、DOMがロードされる前に実行されています。あなたはプレーンなJavaScriptを使用する必要がある場合

は、あなたはDOMがロードされた後にロードするためにbody onload="myFunction()"

MyFunctionを

でその行を追加することができます。