试卷——DOM操作

通过DOM实现试卷的检查基本信息的填写以及评分功能

• 通过对每一个文本输入框以及Radio选择框进行id的设置
• 在scrip标签中使用 document.getElementById获取节点
• 在提交的按钮上使用onclick触发事件 进而对必填信息以及答案进行判断
• 使用innerHTML方法改变节点内容，添加最后总分
• 使用.style.[样式]方法改变样式，在空白的必填信息上通过红色边框进行提醒
• 使用alert（）进行提示信息，当必填信息有一项未填时显示提示信息

定义变量grade进行成绩的统计

• 使用value属性获得文本输入框的内容再使用双等号与标准答案进行判断
• 使用checked属性判断radio及checkbox是否被选中

 

显示效果：

必填信息填写不全

 
 

必填信息填写不全

 
 

计算总分

改进：

在复选框及radio中可以使用form标签进行封装之后再获form节点 然后就可以通过数组对与每一个选项是否选中进行判断，这样一来可以使代码更加简洁。