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> 

這改變了點擊顏色，但是當兩個變量保存在函數內部時，它不起作用......有人可以向我解釋爲什麼？？

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被初始化爲0每次你打電話change()，所以每次它成爲document.getElementById('color').style.color=colors[0]和改變顏色爲紅色但不會再改變..

Answer 2

如果您將這些變量放入函數中，它們在函數啓動時創建並在完成後刪除。所以，「改變」將始終爲0