【发布时间】：2017-07-28 19:08:19
【问题描述】：
无法弄清楚为什么我的 Javascript 代码无法运行以显示字母等级并更改背景颜色。我是新手，但我认为我做对了……有什么想法吗？
- 在表格左下角的单元格中写入数字等级。
- 以及表格右下角单元格中的相关字母等级。 （对于这个问题，使用：A >= 90 > B >= 80 > C >= 70 > D >= 60 > F）
- 如果成绩通过，字母成绩单元格的背景颜色将变为绿色。如果成绩不及格，字母成绩单元格的背景颜色应变为红色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab11aKL.html</title>
<meta charset="utf-8">
<style>
</style>
<script>
function addNumbers() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");
answer.value = parseFloat(t1.value * .20) + parseFloat(t2.value * .20) +
parseFloat(t3.value * .30) + parseFloat(t4.value * .125) +
parseFloat(t5.value * .125) + parseFloat(t6.value * .05);
}
function gradeLetter() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");
var ct1 = parseFloat(t1.value * .20);
var ct2 = parseFloat(t2.value * .20);
var ct3 = parseFloat(t3.value * .30)
var ct4 = parseFloat(t4.value * .125);
var ct5 = parseFloat(t4.value * .125);
var ct6 = parseFloat(t6.value * .05);
if (answer >= 90 > ) {
answergrade = 'A';
document.getElementById("answergrade").style.backgroundColor =
'green';
} else if (answer >= 80 > ) {
answergrade = 'B';
document.getElementById("answergrade").style.backgroundColor =
'green';
} else if (answer >= 70 > ) {
answergrade = 'C';
document.getElementById("answergrade").style.backgroundColor =
'green';
} else if (answer >= 60 > ) {
answergrade = 'D';
document.getElementById("answergrade").style.backgroundColor =
'green';
} else(answer < 60) {
answergrade = 'F';
document.getElementById("answergrade").style.backgroundColor =
'red';
}
}
</script>
</head>
<body>
<form name="tform" id="tform">
<table>
<tr>
<th></th>
<th>Score</th>
</tr>
<tr>
<td>Test 1</td>
<td><input type="text" name="t1" id="t1" /></td>
</tr>
<tr>
<td>Test 2</td>
<td><input type="text" name="t2" id="t2" /></td>
</tr>
<td>Final Exam</td>
<td><input type="text" name="t3" id="t3" /></td>
</tr>
<td>Labs</td>
<td><input type="text" name="t4" id="t4" /></td>
</tr>
<td>Project</td>
<td><input type="text" name="t5" id="t5" /></td>
</tr>
<td>Quizzes</td>
<td><input type="text" name="t6" id="t6" /></td>
</tr>
<tr>
<th colspan="2">
<input type="button" name="b1" id="b1" value="Calculate Grade" onclick="addNumbers(); gradeLetter()" />
</th>
</tr>
<tr>
<td><input type="text" name="answer" id="answer" /></td>
<td><input type="text" name="answergrade" id="answergrade" /></td>
</tr>
</table>
</form>
</body>
</html>【问题讨论】：
-
我在任何地方都看不到答案的变量。
-
什么不起作用？正在发生什么，它与您试图达到的结果有何不同？此外，您的标题应该是问题的简短摘要 - 目前您的标题可能适用于任何 JavaScript 问题。
-
了解如何提出问题： 1. 你期望它做什么或不做什么？ 2. 您检查浏览器控制台是否有错误？如果有，有吗？ 3.设置一个jsFiddle或者一个我们可以运行的代码sn-p，这样我们就不用完全按照我们自己的方式重新创建情况了。
-
您的 javascript 中有语法错误。了解如何使用浏览器的开发者控制台对其进行故障排除。
-
使用数组来存储值，并使用一些迭代方法来读取它们，你所拥有的是......糟糕......
标签： javascript html css