JavaScriptのコードは関数外で実行されますが、関数内では実行されません

Question

<p id="color" >This paragraph may change color </p> 
<input type="button" value="Change color" onclick="change()"> 

<script type="text/javascript"> 
var colors=["red","blue","green","yellow"]; 
var changed=0; 

function change(){ 
     document.getElementById('color').style.color=colors[changed]; 
     changed=changed+1; 
    } 
</script> 

これはクリック時に色が変わりますが、関数内に2つの変数が保持されていると動作しません。なぜ？？

Answer 1

function change(){ 
 

 
    var colors=["red","blue","green","yellow"]; 
 
    var changed=0; 
 
    console.log(changed); 
 
    document.getElementById('color').style.color=colors[changed]; 
 
    changed=changed+1; 
 
    console.log(changed); 
 
}

<p id="color" >This paragraph may change color </p> 
 
<input type="button" value="Change color" onclick="change()">

になりますこれは、色を変更しますが、一度だけchangedはあなたがchange()を呼び出す0たびに初期化するので、毎回それはdocument.getElementById('color').style.color=colors[0]となっていることをされているので、それは「変更」色は赤に変わりますが、もう一度変わりません。

Answer 2

これらの変数を関数に入れると、関数の開始時に作成され、終了後に削除されます。だから、常に0