函数不返回值

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是您更新的小提琴。