未捕获的引用错误 - 一个函数有效，另一个无效
[英]Uncaught Reference Error - one function works the other doesn't
问题描述
我在这里阅读了很多关于未捕获的引用错误，并且认为我有这个想法 - 当脚本试图调用一个函数或引用一个尚未初始化的变量时。 但是，我不确定如何解决这个问题，以及为什么在我的情况下一个函数有效而另一个无效。
我有一个带有两个函数的 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>
1 个解决方案
解决方案1
0 2015-10-07 19:58:24
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>
一个getter语法有效，但另一个没有？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.