函數不返回值

Question

我只開始學習如何重構代碼，並且我在抽象一個簡單函數時失敗。我傳遞的參數爲checkAnwser和它的作品，但count 「丟失」

我不能讓/追加 「計數」 在這裏：

jsfiddle

<input data-correctanswer="javascript" id="answer1" name="" type="text">This works fine (no special chars) 
<br/> 
<button id="btn1">check 1</button> 
<br/> 
<input data-correctanswer="jávascripté" id="answer2" name="" type="text"> 
<br/> 
<button id="btn2">check 2</button> 
<div style="border: 1px solid;" id="result"></div> 

的Javascript：

$(document).ready(function() { 

     var count; 
     $('#btn1').click(function() { 
      checkAnswer($('#answer1').data('correctanswer'), $('#answer1').val()); 
      $('#result').append('result: ').append(count); <-- does not read count 
    }); // end of click 
    $('#btn2').click(function() { 
     checkAnswer($('#answer2').data('correctanswer'), $('#answer2').val()); 
     $('#result').append('result: ').append(count); // <-- does not read count 
    }); // end of click 


     function checkAnswer(coorAns, UserAnswer) { 
      var count = 0; 
      // var coorAns = $('input[type=text]').data('correctanswer'); 
      // var UserAnswer = $('input[type=text]').val(); 
      var mistakesAllowed = 1; 

      if (UserAnswer === coorAns) { 
       count = count + 2; 
      } 
      for (i = 0; i < coorAns.length; i++) { 
       if (coorAns.charAt(i) !== UserAnswer.charAt(i)) { 
        mistakesAllowed--; // reduce one mistake allowed 
        if (mistakesAllowed < 1) { // and if you have more mistakes than allowed 
         count = count + 1; 
        } 
        if (mistakesAllowed < 0) { 
         count = count - 2 
         break; 
        } 
       } 
      } 
      console.log('final count: ' + count); 
      return count; 
     } 

    }); 

Answer 1

Adeneo說什麼：

var count; //here it's defined. 
$('#btn1').click(function() { 
    count = checkAnswer($('#answer1').data('correctanswer'), $('#answer1').val()); 
    $('#result').append('result: ').append(count); 
}); // end of click 
$('#btn2').click(function() { 
    count = checkAnswer($('#answer2').data('correctanswer'), $('#answer2').val()); 
    $('#result').append('result: ').append(count); 
}); // end of click 

你的函數返回checkAnswer一個名爲count值。該值可以分配給變量count。

您可能想過的一個想法是，在函數checkAnswer中分配count也會將其分配給函數外部的變量count。然而，這兩個變量分別在兩個不同的scopes中，除非將函數的結果分配給函數外部的變量count，否則不會連接到彼此。

爲了更精確：

checkAnswer是在相同的範圍內與第一count變量。這意味着你可以這樣做：當您使用運營商var在函數內部它會創建一個綁定到功能範圍的變量

var count = 0; 
console.log(count); //will log 0. 
function checkAnswer() 
{ 
    count = 1; 
} 
checkAnswer(); 
console.log(count); //will log 1. 

但是（它變成一個私有變量）只在該函數內訪問。除非你將它返回到該函數範圍之外的變量。

var count = 0; 
console.log(count); //will log 0. 
function checkAnswer() 
{ 
    var count = 1; 
} 
checkAnswer(); 
console.log(count); //will log 0. 

更多關於堆棧溢出的範圍：

What is the scope of variables in JavaScript?

獎金：

一點點效率的建議對您的代碼

var count; 
$('#btn1', '#btn2').click(function() { 
    var buttonId = $(this).attr("id").substr(4); //will result in 1 or 2 
    count = checkAnswer($('#answer' + buttonId).data('correctanswer'), $('#answer' + buttonId).val()); 
    $('#result').append('result: ').append(count); 
}); // end of click 

這將其降低到一通用功能。所以當你需要更新你的代碼時，你只需要更新一個函數，而不需要更新相同代碼的多個實例。

Answer 2

而不是

checkAnswer($('#answer2').data('correctanswer'), $('#answer2').val()); 

使用

var count=checkAnswer($('#answer2').data('correctanswer'), $('#answer2').val()); //Stored returned value to count variable. 

現在您可以訪問返回值。

Here是您更新的小提琴。