Question

我已经在这里阅读了很多关于未被捕获的引用错误的内容，并认为我有这个想法 - 当脚本试图调用函数或引用尚未初始化的变量时。但是，我不确定如何解决这个问题，为什么在我的情况下，一个功能起作用而另一个不起作用。

我有一个包含两个函数的JS文件，以及一个带有表单的HTML文件。该表单调用function1 onSubmit，并且工作正常。表单内部的单选按钮调用function2 onClick，这就是我收到错误时：

Uncaught ReferenceError: toggleGender is not defined onclick @ forms.html:20

为什么我的第一个功能工作而不是第二个？在我看来，他们在同样的前提下运作。

function calculatePFT()
{
  var userForm = document.getElementById('userValues');
  var pullups = userForm.userPullups.value;
  var crunches = userForm.userCrunches.value;
  var runMinutes = userForm.userMinutes.value;
  var runSeconds = userForm.userSeconds.value;
  
  var runScore = 0;
  
  if(runMinutes < 18) { runScore = 100; }
  else
  {
    var minDiff = runMinutes - 18;
    var minPoints = minDiff * 6;
    var secPoints = Math.ceil(runSeconds/10);
    
    runScore = 100 - (minPoints + secPoints);
  }
  
  var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
  
  document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds.  TOTAL SCORE: " + score;
}

function toggleGender(var gender)
{
  alert("Inside");
  var maleForm = document.getElementById('male');
  var femaleForm = document.getElementById('female');
  
  if(gender == "f")
  {
    alert("Female");
    maleForm.style.display = 'none';
    femaleForm.style.display = 'block';
  }
  else
  {
    alert("Male");
    maleForm.style.display = 'block';
    femaleForm.style.display = 'none';
  }
}

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Testing</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script>
</head>

<body>

<section id="wrapper">

<h3>PFT Calculator</h3>

<form action="#" id="userValues" method="post" onSubmit="calculatePFT()">

  <div id="gender">
    <span class="maleFemale">Male <input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /></span>
    <span class="maleFemale">Female <input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /></span>
  </div>
  
  <div id="male">
    <div class="scoreLine">
      <div class="label">Pullups:</div>
      <div class="entry"><input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /></div>
    </div>
  </div>
  
  <div id="female">
    <div class="scoreLine">
      <div class="label">Hang:</div>
      <div class="entry"><input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /></div>
    </div>
  </div>
  
  <div class="scoreLine">
    <div class="label">Crunches:</div>
    <div class="entry"><input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /></div>
  </div>
  <div class="scoreLine">
    <div class="label">Run (Minutes):</div>
    <div class="entry"><input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /></div>
  </div>
  <div class="scoreLine">
    <div class="label">Run (Seconds):</div>
    <div class="entry"><input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /></div>
  </div>
  
  <div style="text-align:center;"><input type="submit" value="Calculate Score!" id="submitButton" /></div>
  
</form>

<span id="scoreBox"></span>

</section>

</body>
</html>

Answer 1

function toggleGender(var gender)

这里有语法错误。参数名称不应以var为前缀。这会导致函数声明失败（因此当您尝试调用它时，为什么会出现引用错误。）

function calculatePFT()
{
  var userForm = document.getElementById('userValues');
  var pullups = userForm.userPullups.value;
  var crunches = userForm.userCrunches.value;
  var runMinutes = userForm.userMinutes.value;
  var runSeconds = userForm.userSeconds.value;
  
  var runScore = 0;
  
  if(runMinutes < 18) { runScore = 100; }
  else
  {
    var minDiff = runMinutes - 18;
    var minPoints = minDiff * 6;
    var secPoints = Math.ceil(runSeconds/10);
    
    runScore = 100 - (minPoints + secPoints);
  }
  
  var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
  
  document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds.  TOTAL SCORE: " + score;
}

function toggleGender(gender)
{
  alert("Inside");
  var maleForm = document.getElementById('male');
  var femaleForm = document.getElementById('female');
  
  if(gender == "f")
  {
    alert("Female");
    maleForm.style.display = 'none';
    femaleForm.style.display = 'block';
  }
  else
  {
    alert("Male");
    maleForm.style.display = 'block';
    femaleForm.style.display = 'none';
  }
}

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Testing</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script>
</head>

<body>

<section id="wrapper">

<h3>PFT Calculator</h3>

<form action="#" id="userValues" method="post" onSubmit="calculatePFT()">

  <div id="gender">
    <span class="maleFemale">Male <input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /></span>
    <span class="maleFemale">Female <input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /></span>
  </div>
  
  <div id="male">
    <div class="scoreLine">
      <div class="label">Pullups:</div>
      <div class="entry"><input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /></div>
    </div>
  </div>
  
  <div id="female">
    <div class="scoreLine">
      <div class="label">Hang:</div>
      <div class="entry"><input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /></div>
    </div>
  </div>
  
  <div class="scoreLine">
    <div class="label">Crunches:</div>
    <div class="entry"><input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /></div>
  </div>
  <div class="scoreLine">
    <div class="label">Run (Minutes):</div>
    <div class="entry"><input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /></div>
  </div>
  <div class="scoreLine">
    <div class="label">Run (Seconds):</div>
    <div class="entry"><input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /></div>
  </div>
  
  <div style="text-align:center;"><input type="submit" value="Calculate Score!" id="submitButton" /></div>
  
</form>

<span id="scoreBox"></span>

</section>

</body>
</html>

未捕获的参考错误 - 一个功能在另一个功能不起作用

1 个答案: