在java.html成绩计算器中显示计算答案的问题

Question

我似乎对答案的显示有问题，当单击计算按钮时，我需要在一个框中输入字母等级，在另一个框内输入数字等级。

但两者都不想显示，我已经尝试了onclick的几种方法，但都不起作用。

我已经做了我能做的，我很困惑为什么它不起作用。

function calculategrades() {
var letterGrade = "F";
if (number <= 59)
letterGrade = "F";
else if (number >= 60 && number <= 66)
letterGrade = "D";
else if (number >= 67 && number <= 69)
letterGrade = "D+";
else if (number >= 70 && number <= 76)
letterGrade = "C";
else if (number >= 77 && number <= 79)
letterGrade = "C+";
else if (number >= 80 && number <= 86)
letterGrade = "B";
else if (number >= 87 && number <= 89)
letterGrade = "B+";
else if (number >= 90 && number <= 100)
letterGrade = "A";
return letterGrade;
}
function grade() {
var test1 = parseFloat(document.getElementById('test').value * 0.20);
var test2 = parseFloat(document.getElementById('test2').value * 0.20);
var finalexam = parseFloat(document.getElementById('exam').value * 0.30);
var labs = parseFloat(document.getElementById('labs').value * 0.25);
var project = parseFloat(document.getElementById('project').value * 0.25);
var quizzes = parseFloat(document.getElementById('quiz').value * 0.5);
var total = test1 + test2 + finalexam + labs + project + quizzes;
var display = document.getElementById('numbergrade');
}

<form>
<table>
<thead>
<tr>
<th colspan="2">Score</th>
</tr>
</thead>
<tr>
<td>Test 1</td>
<td><input type="number" name="test" id="test" /></td>
</tr>
<tr>
<td>Test 2</td>
<td><input type="number" name="test2" id="test3" /></td>
</tr>
<tr>
<td>Final Exam</td>
<td><input type="number" name="exam" id="exam" /></td>
</tr>
<tr>
<td>Labs</td>
<td><input type="number" name="labs" id="labs" /></td>
</tr>
<tr>
<td>Project</td>
<td><input type="number" name="project" id="project" /></td>
</tr>
<tr>
<td>Quizzes</td>
<td><input type="number" name="quiz" id="quiz" /></td>
</tr>
<tr>
<td colspan="4" style="text-align: center"><input type="button" name="total" id="total" value="Calculate" onclick="grades()" /></td>
</tr>
<tfoot>
<tr>
<th><input type="text" name="numbergrade" id="numbergrade" /></th>
<th><input type="text" name="lettergrade" id="lettergrade" /></th>
</tr>
</tfoot>
</table>
</form>

Answer 1

以下是您的固定代码

function calculateGrades(number) {
var letterGrade = "F";
if (number <= 59)
letterGrade = "F";
else if (number >= 60 && number <= 66)
letterGrade = "D";
else if (number >= 67 && number <= 69)
letterGrade = "D+";
else if (number >= 70 && number <= 76)
letterGrade = "C";
else if (number >= 77 && number <= 79)
letterGrade = "C+";
else if (number >= 80 && number <= 86)
letterGrade = "B";
else if (number >= 87 && number <= 89)
letterGrade = "B+";
else if (number >= 90 && number <= 100)
letterGrade = "A";
return letterGrade;
}
function grade() {
var test1 = parseFloat(document.getElementById('test').value * 0.20);
var test2 = parseFloat(document.getElementById('test3').value * 0.20);
var finalexam = parseFloat(document.getElementById('exam').value * 0.30);
var labs = parseFloat(document.getElementById('labs').value * 0.25);
var project = parseFloat(document.getElementById('project').value * 0.25);
var quizzes = parseFloat(document.getElementById('quiz').value * 0.5);
var total = test1 + test2 + finalexam + labs + project + quizzes;
return total;
}
function showGrades() {
var number = grade();
var letter = calculateGrades(number);
document.getElementById('numbergrade').value = number;
document.getElementById('lettergrade').value = letter;
}

<form>
<table>
<thead>
<tr>
<th colspan="2">Score</th>
</tr>
</thead>
<tr>
<td>Test 1</td>
<td><input type="number" name="test" id="test" /></td>
</tr>
<tr>
<td>Test 2</td>
<td><input type="number" name="test2" id="test3" /></td>
</tr>
<tr>
<td>Final Exam</td>
<td><input type="number" name="exam" id="exam" /></td>
</tr>
<tr>
<td>Labs</td>
<td><input type="number" name="labs" id="labs" /></td>
</tr>
<tr>
<td>Project</td>
<td><input type="number" name="project" id="project" /></td>
</tr>
<tr>
<td>Quizzes</td>
<td><input type="number" name="quiz" id="quiz" /></td>
</tr>
<tr>
<td colspan="4" style="text-align: center"><input type="button" name="total" id="total" value="Calculate" onclick="showGrades()" /></td>
</tr>
<tfoot>
<tr>
<th><input type="text" name="numbergrade" id="numbergrade" /></th>
<th><input type="text" name="lettergrade" id="lettergrade" /></th>
</tr>
</tfoot>
</table>
</form>

你打错了很多字，而且你从来没有调用过函数calculateGrades，也不接受calculateGrades中的参数，所以你使用了一些全局变量"number"，并且你没有将函数grade的结果设置为numbergrade 的值

Answer 2

试试这个，只是猜测吗？做你的代码发布方式我无法测试。

更改

var display = document.getElementById('numbergrade');

至

document.getElementById("numbergrade").innerHTML = total;

然后调用calculategrades()，将total传递给它，这样它就可以使用了。

然后更改

return letterGrade;

至

document.getElementById("lettergrade").innerHTML = lettergrade;