変更された変数を取得しない関数です。グローバルではありませんか？

Question

私は7つの選択ボックスと送信ボタンで構成された非常に簡単なクイズを持っています。私が達成しようとしているのは、選択ボックスのどれもが変更されていない場合、およびそれらがスコアを上げるために変更されている場合、警告エラーをポップアップすることです。

私は 'changed'という変数を設定しました。これはfalseです。これらの選択ボックスの1つが変更されると、「変更されました」がtrueになります。

これは機能しますが、送信ボタンを押すとコンソールのログが表示され、スコアを表示する機能が呼び出されます「変更されました」がTRUEに変更されたことを認識していないような警告が表示されます。

相続人のjQuery ...

var changed = false; 

$('select').on('change', function() { 

var changed = true; 
console.log('TRUE'); 

}); 

$("#button").click(function(){ 

var correct = 0; 

var selectValue; 

var questions = document.getElementsByClassName("question"); 

var numOfQuestions = questions.length; 

for(var i = 0; i < questions.length; i++){//begin for loop 

//get the value of the select element 
selectValue = questions[i].options[questions[i].selectedIndex].value; 

//if the value equals right 
if(selectValue === "right"){//begin if then 

//increment the correct variable 
correct++; 

}//end if then 

}//end for loop 



if(changed === false){ 
$('#scoreDisplay span').append('WARNING'); 
} 
else{ 

$('#scoreDisplay span').append(correct); 

} 
}); 

かかわらず、あなたがどんな選択ボックスを変更したかどうかの、あなたはここにアクションでそれを見ることができますが、あなたが提出クリックしたとき、それは単に「WARNING」を示す表示されます... http://gogeye.com/connectquiz/index.html

Answer 1

var changedの再定義 'VAR =真を変更'：

$('select').on('change', function() { 

    // creates a new local variable that is only available inside this function 
    var changed = true; 
    console.log('TRUE'); 

}); 

は、より高いスコープで宣言されたchanged変数を「シャドウ」および「隠す」新しいローカル変数を作成します。

それはその名前の新しい変数を作成していないが、代わりにちょうど高く設定されるように、あなたの関数内1からvarを削除するには1スコープ：

var changed = false; 

$('select').on('change', function() { 

    // no var in front of this variable so you are just setting 
    // the earlier one, not creating a new one 
    changed = true; 
    console.log('TRUE'); 

}); 

は、あなたが持つ変数を宣言いつでも覚えていますvarは、その関数内でのみ使用可能な新しいローカル変数を定義します。その変数が上位のスコープ内の変数と同じ名前になった場合、それはその変数名を上書きし、インタプリタは参照するたびに高いスコープの変数名の代わりにローカルの変数名を使用します。

Javascriptの解釈では、可変参照を解決するための有効範囲検索が行われます。まず、ローカルスコープを調べます。そこに見つかった場合は、見つかったものを使用します。そこに見つからなければ、次に高いスコープを調べます。そこに見つからなければ、グローバルスコープに達するまで、より高いスコープになります。したがって、変数名が見つかった最も近いスコープは、使用されているスコープです - したがって、varまたはlet定義済みローカル変数が最初に使用されます。

Answer 2

から 'VAR' を削除し、このイベントハンドラで

var changed = false; 

$('select').on('change', function() {  
    changed = true; 
    console.log('TRUE');  
});