我正在开发一个新的安全评估网页，我正在使用HTML和Java Script。由于某种原因，代码无法正常工作。页面的工作方式是让用户回答“是”或“否”问题，当用户完成后，单击“提交”。然后页面将显示回答是的问题的数量，以及如果用户通过或未通过评估的消息。但是当我点击提交时，我只看到结果，而不是消息。
任何反馈都将不胜感激。
function sumInputs() {
var text;
var score = document.getElementById("total").value;
if (score < 60) {
text = "You have failed the Assessment";
} else(score > 60) {
text = "You have passed the Assessment";
}
document.getElementById("demo").innerHTML = text;
}
function calcscore() {
var score = 0;
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
window.sumInputs = function() {
var inputs = $('.calc:checked'),
result = document.getElementById('total'),
sum = 0;
for (var i = 0; i < inputs.length; i++) {
sum += parseInt(inputs[i].value);
}
$('#total').val(sum);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p id="demo"></p>
<h1>Security Assessment </h1>
<table>
<tr>
<th>PERSONNEL SECURITY</th>
</tr>
<tr>
<td>1. Does your staff wear ID badges?
<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" /> No
<input class="calc" type="radio" name="radio1" value="0" /><br />
</td>
</tr>
<tr>
<td>2. Is a current picture part of the ID badge? Yes
<input class="calc" type="radio" name="radio2" value="1" /> No
<input class="calc" type="radio" name="radio2" value="0" /><br />
</td>
</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge? Yes
<input class="calc" type="radio" name="radio3" value="1" /> No
<input class="calc" type="radio" name="radio3" value="0" /><br />
</form>
</td>
</tr>
</table>
Total : <input type="text" name="total" id="total" />
<input type="Submit" value="Submit" onclick="sumInputs()">
</body>
</html>
答案 0 :(得分：0)
检查这是否有效。还要检查变量类型
function calcscore() {
var score = 0;
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
function sumInputs() {
var inputs = $('.calc:checked'),
result = document.getElementById('total'),
sum = 0;
for (var i = 0; i < inputs.length; i++) {
sum += parseInt(inputs[i].value);
}
$('#total').val(sum);
var text, score = document.getElementById("total").value;
if (score < 60) {
text = "You have failed the Assessment";
} else if(score > 60) {
text = "You have passed the Assessment";
}
document.getElementById("demo").innerHTML = text;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h1>Security Assessment </h1>
<table>
<tr>
<th>PERSONNEL SECURITY</th>
</tr>
<tr>
<td>1. Does your staff wear ID badges?
<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" />
No
<input class="calc" type="radio" name="radio1" value="0" /><br />
</form>
</td>
</tr>
<tr>
<td>2. Is a current picture part of the ID badge?
<form>
Yes
<input class="calc" type="radio" name="radio2" value="1" />
No
<input class="calc" type="radio" name="radio2" value="0" /><br />
</form>
</td>
</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified
on the Badge?
<form>
Yes
<input class="calc" type="radio" name="radio3" value="1" />
No
<input class="calc" type="radio" name="radio3" value="0" /><br />
</form>
</td>
</tr>
</table>
Total : <input type="text" name="total" id="total"/>
<input type="Submit" value="Submit" onclick="sumInputs()">
<p id="demo"></p>
</body>
</html>
答案 1 :(得分：0)
您有两个名为sumInputs的函数;第二个（填写＆＃39;得分＆＃39;字段）覆盖了第一个（应该输出消息。）
此外，评分试图以百分比为基础，但从未计算过百分比，只计算正确的问题。
（这里和那里也有一些语法错误。）
通过合并两个sumInputs函数来纠正所有这些因素导致：
function calcscore() {
var score = 0;
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
window.sumInputs = function() {
var inputs = $('.calc:checked'),
result = document.getElementById('total'),
sum = 0;
for (var i = 0; i < inputs.length; i++) {
sum += parseInt(inputs[i].value);
}
$('#total').val(sum);
var score = sum / 3 * 100; // calculate percentage
if (score < 60) {
text = "You have failed the Assessment";
} else { // no need for else if (score > 60)... which would have failed if the score was exactly 60
text = "You have passed the Assessment";
}
document.getElementById("demo").innerHTML = text;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p id="demo"></p>
<h1>Security Assessment </h1>
<table>
<tr>
<th>PERSONNEL SECURITY</th>
</tr>
<tr>
<td>1. Does your staff wear ID badges?
<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" /> No
<input class="calc" type="radio" name="radio1" value="0" /><br />
</td>
</tr>
<tr>
<td>2. Is a current picture part of the ID badge? Yes
<input class="calc" type="radio" name="radio2" value="1" /> No
<input class="calc" type="radio" name="radio2" value="0" /><br />
</td>
</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge? Yes
<input class="calc" type="radio" name="radio3" value="1" /> No
<input class="calc" type="radio" name="radio3" value="0" /><br />
</form>
</td>
</tr>
</table>
Total : <input type="text" name="total" id="total" />
<input type="Submit" value="Submit" onclick="sumInputs()">
</body>
</html>
顺便提一下，calcscore()函数是不必要的 - 它会在用户进行测验时更新显示的分数，但测验结束时使用的sumInputs函数并不依赖于它。如果您不想向用户提供有关每个问题是否正确的即时反馈，您可以删除该功能（并将$("input[name=sum]").val(score)移至sumInputs()。
答案 2 :(得分：0)
我添加了一些已经完成的修改，并将普通的javascript更改为jquery。
$('.calc').change(function() {
calcscore();
});
$('#submitted').click(function() {
sumInputs();
result();
});
function sumInputs() {
var inputs = $('.calc:checked'),
result = $('#total').val(),
sum = 0;
for (var i = 0; i < inputs.length; i++) {
sum += parseInt(inputs[i].value);
}
$('#total').val(sum);
}
function result() {
var text;
var score = (( $('#total').val() ) / 3 ) * 100;
var score = score.toFixed(2);
if (score < 60) {
text = "Total " + score + ": You have failed the Assessment";
}
else {
text = "Total " + score + ": You have passed the Assessment";
}
$('#demo').text(text);
}
function calcscore() {
var score = 0;
$('.calc:checked').each(function () {
score += parseInt($(this).val(), 10);
});
$('#total').val(score);
}<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Security Assessment </h1>
<form>
<table>
<tr>
<th>PERSONNEL SECURITY</th>
</tr>
<tr>
<td>1. Does your staff wear ID badges?
Yes <input class="calc" type="radio" name="radio1" value="1" />
No <input class="calc" type="radio" name="radio1" value="0" /><br />
</td>
</tr>
<tr>
<td>2. Is a current picture part of the ID badge?
Yes <input class="calc" type="radio" name="radio2" value="1" />
No <input class="calc" type="radio" name="radio2" value="0" /><br />
</td>
</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge?
Yes <input class="calc" type="radio" name="radio3" value="1" />
No <input class="calc" type="radio" name="radio3" value="0" /><br />
</td>
</tr>
</table>
</form>
Total : <input type="text" name="total" id="total" />
<input id="submitted" type="Submit" value="Submit"><br><br>
<p id="demo"></p>
</body>
</html>