dom试卷

作者: 张鸽 | 来源:发表于2017-06-01 22:48 被阅读0次

对之前的试卷进行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>
必填信息提醒 必要信息提醒 得分

相关文章

  • dom试卷

    对之前的试卷进行dom操作,实现必要字段提醒以及打分的功能。实现步骤: 给文本框及选项加id 使用 documen...

  • 2017-06-01今日总结

    经历: 课设 数电实验 完成dom试卷,及博客 听组员分享dom 学到和想到: 今天完成了dom试卷,但其实只是用...

  • 试卷——DOM操作

    通过DOM实现试卷的检查基本信息的填写以及评分功能 通过对每一个文本输入框以及Radio选择框进行id的设置 在s...

  • 2017-05-31今日总结

    今天主要做了: 课设 写数电实验报告 学习dom,写试卷 总结: dom的应用不熟练,试卷效果还不能很好的体现出来...

  • dom 级别和dom 事件处理

    dom级别:dom0 dom1 dom2 dom3 dom事件处理:dom0 dom2 dom3 (1级DOM标准...

  • WY-DOM编程

    DOM Document Object Model DOM Core DOM HTML DOM Style DOM...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级,DOM1级,DOM2级和DOM3级DOM事件:DOM0级事件处理,...

  • js红包雨活动

    function Block( dom ){ this.dom = dom; //dom this.parentW...

  • DOM操作的分类

    DOM操作分为三个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。 DOM Core DOM ...

网友评论

      本文标题:dom试卷

      本文链接:https://www.haomeiwen.com/subject/ydtyfxtx.html