Question

Javascript和HTML新手。简而言之，如果用户输入正确的随机数学问题总和，则尝试更新分数。无法将问题的答案传递给我的函数，该函数检查用户输入的内容是否正确。我只想让分数增加一。由于某种原因，我传递参数“得分”的函数未被它识别。这是我的代码的一个非常快速的例子。更关注逻辑而不是现在的程序。我现在知道得分不会正确更新，但问题在于传递“回答”变量。一旦函数至少被调用，我将轻松地完成得分增加。非常感谢你的时间！

    <html>
<title></title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body onload = "displayProblem()">

<script>

function displayProblem(){
 var answer = (firstNum) + (secondNum);    
 var firstNum = (Math.floor(Math.random()*10) + 1);
 var secondNum = (Math.floor(Math.random()*10) + 1);

 document.getElementById("qstns").innerHTML = firstNum +" + " + secondNum    +" = ";

 }  

function checkAnswer(){
  var userAnswer = document.getElementById("answr").value; 
   if(userAnswer === answer){
    updateScore();
    console.log("score updated");
  }
console.log("did not update score");

}

function displayNext(){
 document.getElementById("next").style.display = "block";
}

function hideNext(){
 document.getElementById("next").style.display = "none";
 }

function updateScore(){
  var score = 0;
  score++;
  document.getElementById("score").innerHTML = score;

}

function clearAnswer(){
  document.getElementById("answr").value = " ";
}


 </script>

<div id="main">
 <div id="qstns">

  </div>


</div>
<input type="text" id="answr">
Score: <label id="score"> 0 </label>

<button type="Sumbit" id="submit" onclick="displayNext(), checkAnswer    ()">Check</button>
<button type="Submit" id="next" onclick="displayProblem(), hideNext(),    clearAnswer()" style="display:none;">Next</button>


</body>

</html>

Answer 1

问题是，每次调用函数“updateScore”时您将“得分”的值重置为零。

单向可能是这样：首先读取当前得分而不是增加......

function updateScore(){
  var score = pareseInt(document.getElementById("score").innerHTML);
  score++;
  document.getElementById("score").innerHTML = score;
}

或者：将分数设置为“全局”而不是增加......

var score = 0;
function updateScore(){
  score++;
  document.getElementById("score").innerHTML = score;
}

Answer 2

试试这个：

<html>
      <title></title>
      <head>
      </head>
      <body onload="displayProblem()">
        <script>
            var answer;
            var score=0;
            function displayProblem(){   
                 var firstNum = (Math.floor(Math.random()*10) + 1);
                 var secondNum = (Math.floor(Math.random()*10) + 1);
                 answer = (firstNum) + (secondNum); 
                 document.getElementById("qstns").innerHTML = firstNum +" + " + secondNum    +" = ";
             }  

            function checkAnswer(){
                var userAnswer = document.getElementById("answr").value; 
                if(userAnswer == answer)
                    updateScore();
            }

            function displayNext(){
                document.getElementById("next").style.display = "block";
            }

            function hideNext(){
                document.getElementById("next").style.display = "none";
            }

            function updateScore(){
                score++;
                document.getElementById("score").innerHTML = score;
            }

            function clearAnswer(){
              document.getElementById("answr").value = " ";
            }

        </script>
        <div id="main">
          <div id="qstns"></div>
        </div>
        <input type="text" id="answr">Score: <label id="score"> 0 </label></input>
        <button type="Sumbit" id="submit" onclick="displayNext(), checkAnswer    ()">Check</button>
        <button type="Submit" id="next" onclick="displayProblem(), hideNext(),    clearAnswer()" style="display:none;">Next</button>
      </body>
    </html>

你有两个问题;一个answer是displayProblem()的本地变量，因此checkAnswer()无法访问，而您使用的===代替==。 ===评估类型和值，userAnswer和answer属于不同类型，因此评估为false。

JS fiddle

编辑：score将按预期增加。

Answer 3

<html>
<title></title>
<head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body onload = 'displayProblem()'>
<script>

//'answer','score' variables should be declared outside function globally
var answer=0;
var score=0;

function displayProblem(){
 //var answer = (firstNum) + (secondNum); The calculation should be after assigning value to 'firstNum', 'secondNum'   
 var firstNum = (Math.floor(Math.random()*10) + 1);
 var secondNum = (Math.floor(Math.random()*10) + 1);
 answer = (firstNum) + (secondNum);
 document.getElementById('qstns').innerHTML = firstNum +' + ' + secondNum    +' = ';
 }  

function checkAnswer(){
  var userAnswer = document.getElementById('answr').value; 
   if(userAnswer == answer){
    updateScore();
    console.log('score updated');
  }
  else
    console.log('did not update score');
}

function displayNext(){
 document.getElementById('next').style.display = 'block';
}

function hideNext(){
 document.getElementById('next').style.display = 'none';
 }

function updateScore(){
  score++;
  document.getElementById('score').innerHTML = score;
}

function clearAnswer(){
  document.getElementById('answr').value = ' ';
}
 </script>

<div id='main'>
 <div id='qstns'>
  </div>
</div>
<input type='text' id='answr'>
Score: <label id='score'> 0 </label>
<button type='Sumbit' id='submit' onclick='displayNext(), checkAnswer();'>Check</button>
<button type='Submit' id='next' onclick='displayProblem(), hideNext(), clearAnswer();' style='display:none;'>Next</button>
</body>
</html>

在Javascript中无法将变量从一个函数传递到另一个函数

3 个答案: