我正在构建一个允许计算Bishop得分的表单：https://jsfiddle.net/molecoder/1oqxsw81/。
允许用户在4个选项中进行选择，每个选项（0 cm，1-2 cm，...）都有相关值。
以下是表单的 HTML 代码：
<form action="" id="bishopform" onsubmit="return true;">
<div>
<fieldset>
<legend>Bishop score</legend>
<p>(modify one field to see the score)</p>
<div id="bishopScore"></div>
<label><b>Cervical Dilatation</b></label><br/>
<label class='radiolabel'><input type="radio" name="selectedcervicaldilatation" value="cerdi1" onclick="calculateTotalBishop()"/>0 cm</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcervicaldilatation" value="cerdi2" onclick="calculateTotalBishop()" checked/>1-2 cm</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcervicaldilatation" value="cerdi3" onclick="calculateTotalBishop()" />3-4 cm</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcervicaldilatation" value="cerdi4" onclick="calculateTotalBishop()"/>5-6 cm</label><br/>
<br/>
</fieldset>
</div>
</form>
以下是处理选择的 JavaScript 代码：
var cervical_dilatation = new Array();
cervical_dilatation["cerdi1"]=0;
cervical_dilatation["cerdi2"]=1;
cervical_dilatation["cerdi3"]=2;
cervical_dilatation["cerdi4"]=3;
// getCervicalDilation() finds the points based on the answer to "Cervical Dilation".
// Here, we need to take user's the selection from radio button selection
function getCervicalDilation()
{
var cerdiPoints=0;
//Get a reference to the form id="bishopform"
var theForm = document.forms["bishopform"];
//Get a reference to the answer the user Chooses name=selectedcervicaldilatation":
var selectedCervicalDilation = theForm.elements["selectedcervicaldilatation"];
//Here since there are 4 radio buttons selectedCervicalDilation.length = 4
//We loop through each radio buttons
for(var i = 0; i < selectedCervicalDilation.length; i++)
{
//if the radio button is checked
if(selectedCervicalDilation[i].checked)
{
//we set cerdiPoints to the value of the selected radio button
cerdiPoints = cervical_dilatation[selectedCervicalDilation[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cerdiPoints
return cerdiPoints;
}
function calculateTotalBishop()
{
//Here we get the Bishop Score by calling our function
//Each function returns a number so by calling them we add the values they return together
var bishopScore = 3*getCervicalDilation() + 1;
//display the result
var divobj = document.getElementById('bishopScore');
divobj.style.display='block';
divobj.innerHTML = bishopScore+"% likelihood that induction will be successful";
}
由于任何特殊原因，我无法看到用户选择的结果。
如何修复？
答案 0 :(得分：4)
问题是calculateTotalBishop()必须是一个全局函数......但是jsfiddle将你的代码包装在window.onload中...而这就是记录错误的原因Uncaught ReferenceError: calculateTotalBishop is not defined
要解决此问题，只需将jsfiddle中js设置中的“加载类型”从“onLoad”更改为“No wrap-in body”......这样就可以解决问题
工作小提琴：https://jsfiddle.net/1oqxsw81/1/
PS：
建议在js中使用addEventListener而不是html中的onclick
如果您使用onchange事件会更好，因为值也可以从键盘更改
答案 1 :(得分：3)
由于 JSFiddle 在预览中处理脚本的方式，它无法正常工作。因为他们使用window.onload方法将输入的脚本注入iframe，所以您的功能在新范围内变为私有，并且无法从html调用。
您的代码可以正常工作，因为它来自SO：
var cervical_dilatation = new Array();
cervical_dilatation["cerdi1"]=0;
cervical_dilatation["cerdi2"]=1;
cervical_dilatation["cerdi3"]=2;
cervical_dilatation["cerdi4"]=3;
// getCervicalDilation() finds the points based on the answer to "Cervical Dilation".
// Here, we need to take user's the selection from radio button selection
function getCervicalDilation()
{
var cerdiPoints=0;
//Get a reference to the form id="bishopform"
var theForm = document.forms["bishopform"];
//Get a reference to the answer the user Chooses name=selectedcervicaldilatation":
var selectedCervicalDilation = theForm.elements["selectedcervicaldilatation"];
//Here since there are 4 radio buttons selectedCervicalDilation.length = 4
//We loop through each radio buttons
for(var i = 0; i < selectedCervicalDilation.length; i++)
{
//if the radio button is checked
if(selectedCervicalDilation[i].checked)
{
//we set cerdiPoints to the value of the selected radio button
cerdiPoints = cervical_dilatation[selectedCervicalDilation[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cerdiPoints
return cerdiPoints;
}
function calculateTotalBishop()
{
//Here we get the Bishop Score by calling our function
//Each function returns a number so by calling them we add the values they return together
var bishopScore = 3*getCervicalDilation() + 1;
//display the result
var divobj = document.getElementById('bishopScore');
divobj.style.display='block';
divobj.innerHTML = bishopScore+"% likelihood that induction will be successful";
}#bishopScore{
padding:10px;
font-weight:bold;
background-color:limegreen;
} <form action="" id="bishopform" onsubmit="return true;">
<div>
<fieldset>
<legend>Bishop score</legend>
<p>(modify one field to see the score)</p>
<div id="bishopScore"></div>
<label><b>Cervical Dilatation</b></label><br/>
<label class='radiolabel'><input type="radio" name="selectedcervicaldilatation" value="cerdi1" onclick="calculateTotalBishop()"/>0 cm</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcervicaldilatation" value="cerdi2" onclick="calculateTotalBishop()" checked/>1-2 cm</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcervicaldilatation" value="cerdi3" onclick="calculateTotalBishop()" />3-4 cm</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcervicaldilatation" value="cerdi4" onclick="calculateTotalBishop()"/>5-6 cm</label><br/>
<br/>
</fieldset>
</div>
</form>