Funktion nimmt geänderte Variable nicht auf, ist sie nicht global?

Question

So habe ich ein ziemlich einfaches Quiz, bestehend aus 7 Auswahlfeldern und einem Absenden-Button. Was ich versuche zu erreichen, besteht darin, einen Warnfehler auftauchen zu lassen, wenn keines der Auswahlfelder geändert wurde und wenn es geändert wurde, damit es den Punktestand anzeigt.

Ich habe eine Variable namens "geändert" eingerichtet, die falsch ist. Wenn eines dieser Auswahlfelder geändert wird, wird "geändert" zu "wahr" ...

Das funktioniert und ich habe ein Konsolenprotokoll, das mir zeigt, wie es funktioniert, aber wenn der Submit-Button gedrückt wird, ruft die Funktion die Scores auf oder die Warnung scheint nicht zu erkennen, dass sich "geändert" in TRUE geändert hat.

Heres die 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); 

} 
}); 

Sie es hier in Aktion sehen können, aber Sie werden es sehen zeigt nur ‚Warnung‘, wenn Sie auf Senden klicken, und zwar unabhängig davon, ob Sie alle Auswahlboxen geändert haben ... http://gogeye.com/connectquiz/index.html

Answer 1

die Neudefinition von var changed in diesem Ereignishandler:

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

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

}); 

macht eine neue lokale Variable, dass „Schatten“ und „versteckt“ die changed Variable in einem höheren Umfang erklärt.

Entfernen Sie die var von der einen in Ihrer Funktion, so ist es nicht eine neue Variable dieses Namens zu schaffen, sondern ist nur die Einstellung höher ein scoped:

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'); 

}); 

Erinnern Sie sich, wann immer Sie deklarieren eine Variable mit var Innerhalb einer Funktion definiert es eine neue lokale Variable, die nur innerhalb dieser Funktion verfügbar ist. Wenn dieser Name den gleichen Namen wie eine Variable in einem höheren Bereich hat, überschreibt er diesen Variablennamen und der Interpreter verwendet den lokalen Namen anstelle des höheren Bereichs, wenn Sie ihn referenzieren.

Der Javascript-Interpreter führt eine Bereichsuche durch, um eine Variablenreferenz aufzulösen. Zuerst sieht es im lokalen Bereich aus. Wenn es dort gefunden wird, dann verwendet es das dort gefundene. Wenn es dort nicht gefunden wird, schaut es sich den nächsthöheren Bereich an. Wenn es dort nicht gefunden wird, geht es zu einem höheren Bereich, bis es den globalen Geltungsbereich erreicht. Daher ist der nächstgelegene Bereich, in dem der Variablenname gefunden wird, derjenige, der verwendet wird - daher wird zuerst eine var oder let definierte lokale Variable verwendet.

Answer 2

entfernen Sie das 'var' von 'var geändert = true'

var changed = false; 

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