我正在为一个学校项目工作，我的代码有点问题。我希望代码执行以下操作：如果用户按下“提交”按钮，则必须提供所做选择的价值。就像选择问题1字母a（值为10）和问题2字母b（值20）一样，它将得到总计30。我已经为每个答案提供了值。但是，当我运行代码时，我得到了NaN。
这是HTML代码：
var numo, numt, nump, numf, numv, x;
var questiontype = document.querySelectorAll('input[name=type]');
questiontype.forEach((radio)=>{
radio.addEventListener('change',(e)=>{
var numo = e.target.value;
});
});
var questionage = document.querySelectorAll('input[name=age]');
questionage.forEach((radio)=>{
radio.addEventListener('change',(e)=>{
var numt = e.target.value;
});
});
var questionanatomical = document.querySelectorAll('input[name=anatomical]');
questionanatomical.forEach((radio)=>{
radio.addEventListener('change',(e)=>{
var nump= e.target.value;
});
});
var questionpatient = document.querySelectorAll('input[name=patient]');
questionpatient.forEach((radio)=>{
radio.addEventListener('change',(e)=>{
var numf = e.target.value;
});
});
var questionaccuracy = document.querySelectorAll('input[name=accuracy]');
questionaccuracy.forEach((radio)=>{
radio.addEventListener('change',(e)=>{
var numv = e.target.value;
});
});
function getValues(numo, numt, nump, numf, numv) {
var x = numo + numt + nump + numf + numv;
document.getElementById("answer").innerHTML = x;
} <article>
<h1 class="headings">New Mask</h1>
<section>
<fieldset>
<form action="" method="POST" id="nwmask">
<label>Type of Base Plate</label> </br>
<input type="radio" name="type" value=10000 checked> High Precision <br/>
<input type="radio" name="type" value=20000> Push-Pin <br/>
</fieldset>
<br/>
<fieldset>
<label>Age</label> </br>
<input type="radio" name="age" value=1000 checked> Adult <br/>
<input type="radio" name="age" value=2000> Paediatric <br/>
</fieldset>
<br/>
<fieldset>
<label>Anatomical Region</label> </br>
<input type="radio" name="anatomical" value=100 checked> Brain <br/>
<input type="radio" name="anatomical" value=200> Head, Neck and Shoulders <br/>
</fieldset>
<br/>
<fieldset>
<label>Type of Patient</label> </br>
<input type="radio" name="patient" value=10 checked> Curative <br/>
<input type="radio" name="patient" value=20> Palliative <br/>
<input type="radio" name="patient" value=30> Claustrophobic <br/>
</fieldset>
<br/>
<fieldset/>
<label>Accuracy</label> </br>
<input type="radio" name="accuracy" value=1 checked> <1mm <br/>
<input type="radio" name="accuracy" value=2> <2mm <br/>
</fieldset>
<br/>
</form>
<br/>
<button type="submit" value="Submit" onclick="getValues();"> Submit </button>
<!--<button type="reset" value="Reset" id="resetBtn"> Reset </button>-->
</section>
<p id="answer"></p>
</article>最佳答案
您的第一个问题：
当你写
var nump; // <------ this line
// ...
questionanatomical.forEach((radio)=>{
radio.addEventListener('change',(e)=>{
var nump= e.target.value; // <-------- is "hidden" by this line
var nump = e.target.value行同时是一个变量声明和一个变量赋值，可以这样写：questionanatomical.forEach((radio)=>{
radio.addEventListener('change',(e)=>{
var nump; // <--------- declaration
nump = e.target.value; // <-------- assignment
声明部分意味着三件事：
您刚刚在函数作用域中创建了一个名为
nump的全新变量。该变量与第1行（在全局范围内）声明的原始nump变量无关。由于本地作用域
nump变量的名称与原始全局作用域nump变量的名称相同，因此原始nump从函数中“被隐藏”。因此，下一行的分配是分配给本地
nump，而不是全局nump变量。函数范围之外的任何东西都看不到您刚刚分配的值-这意味着您也可以编写var noOneWillEverSeeThis = e.target.value;。解决方案是丢失
var，所以，不用写var nump = e.target.value;你会写
nump = e.target.value;现在，您无需在内部范围中声明一个全新的变量，然后将其设置为
e.target.value，而是将原始的nump变量（在全局范围内）设置为所需的值。为了进一步了解此问题，我建议使用Google搜索“了解JavaScript范围”。
您的第二个问题：
function getValues(numo, numt, nump, numf, numv) {
与问题1中的错误相同，此方法稍有不同：
numo，numt，nump等被声明为函数自变量-这在函数作用域中隐藏了先前的声明。由于您的
onclick回调未向函数提供这些变量，因此发生的有效调用是：getValues(undefined, undefined, undefined, undefined, undefined)。现在尝试在控制台中键入以下内容：
undefined + undefined。看看发生了什么事？我敢肯定，鉴于第一个问题的解决方案，您可以自行解决如何解决第二个问题；）
关于javascript - 调试帮助JavaScript和HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46673388/