对之前的试卷进行dom操作,实现必要字段提醒以及打分的功能。
实现步骤:
- 给文本框及选项加id
- 使用 document.getElementById获取节点
- 在计分按钮上添加onclick触发事件,实现对必填信息以及答案的判断
- 使用innerHTML方法改变节点内容,添加最后总分
- 使用.style.borderColor方法改变文本框颜色
- 使用alert()弹出提示信息
- 使用checked属性判断radio及checkbox是否被选中
<script>
function check() {
var classNum = document.getElementById("1");
var snoNum = document.getElementById("2");
var nameNum = document.getElementById("3");
if (classNum.value === "" || snoNum.value === "" || nameNum.value === "") {
classNum.style.borderColor = "red";
snoNum.style.borderColor = "red";
nameNum.style.borderColor = "red";
alert("请检查必填元素!")
}
else {
var grade = 0;
if (document.getElementById("answer1").value === "统一建模语言")
grade += 5;
if (document.getElementById("answer2").value === "封装性")
grade += 5;
if (document.getElementById("answer3").value === "继承性")
grade += 5;
if (document.getElementById("answer4").value === "多态性")
grade += 5;
if (document.getElementById("answer5").checked)
grade += 10;
if (document.getElementById("answer6").checked)
grade += 10;
if (document.getElementById("answer7").checked && document.getElementById("answer8").checked && document.getElementById("answer9").checked)
grade += 10;
if (document.getElementById("answer10").checked && document.getElementById("answer11").checked && document.getElementById("answer12").checked)
grade += 10;
if (document.getElementById("answer13").checked)
grade += 10;
if (document.getElementById("answer14").checked)
grade += 10;
if (document.getElementById("answer15").value === "模型是对现实世界的简化和抽象,模型是对所研究的系统、过程、事物或概念的一种表达形式。可以是某种图形;或者是一种数学表达式")
grade += 20;
document.getElementById("score").innerHTML = "得分:" + grade;
document.getElementById("score").innerHTML.style.color = "red";
}
}
</script>