HTML表单提交参数功能，并且函数不写入innerHTML的答案

问题描述 投票：-1回答：1

我正在努力的一个小练习使用HTML5，CSS和JavaScript。目标详情如下：

*在26日举行的运动 - 这是部分实现参与的练习。

  • 明天晚上11点之前将答案上传到Moodle
  • 延迟提交将不被接受，但部分完成的答案将被授予部分学分。
  • 问题 - 重写之前练习中创建的javascript脚本。与前一个版本类似，这个新版本还有两个名为functionA和functionB的函数：（1）functionA有一个参数，用于计算学生参加CSC001的总分。课程包括： 两个测验 - 每个测验的满分为10分，重量为5％。 四项任务 - 每项任务的满分为100分，权重为5％。 期中考试 - 满分为50分，体重为10％。 期末考试 - 满分为100分，体重为40％。 一个项目 - 满分为25分，重量为25％。 每个课程作业的分数存储为数组的一个元素。调用它时，该数组通过functionA的参数传递给functionA，然后functionA计算学生的总分。 计算总分后，调用functionB，计算然后返回字母等级（由A，B，C，D或F表示）。 （2）当调用functionB时，根据步骤（1）的总成绩，函数B计算并将函数等级返回给functionA。规则如下： 90％ - 100％ B 80％ - 82％ C 70％ - 79％ D 60％ - 69％ F 0％ - 59％ （3）调用函数A，用一个数组来表示每个课程的分数......

我写了一些代码，它没有通过浏览器控制台报告任何错误，将我的数字输入带入字段，擦除它们并似乎处理，但在页面上没有写任何结果。我希望有更多熟练使用WebDev的人可以给我一些见解。谢谢！

<!DOCTYPE>
<html>
<head>
    <title>Feb 26th</title>
</head>
<body bgcolor="gray">
    <script type="text/javascript">
        var totalScore;

        function functionA(array) {
            if (!(array.length == 9) || !(Array.isArray(array))){
                return false;
            }

            if ((array[0] >= 0 && array[0] <= 10) && (array[1] >= 0 && array[1] <= 10)) {
                var percentage1 = array[0] / 10;
                var percentage2 = array[1] / 10;
                var weightIndividual = 0.05 / 2;
                array[0] = percentage1 * weightIndividual;
                array[1] = percentage2 * weightIndividual;
            }
            else {
                console.log('Quizes are out of bounds.');
            }

            if ((array[2] >= 0 && array[2] <= 100) && (array[3] >= 0 && array[3] <= 100) &&
                (array[4] >= 0 && array[4] <= 100) && (array[5] >= 0 && array[5] <= 100)) {
                var percentage1 = array[2] / 100;
                var percentage2 = array[3] / 100;
                var percentage2 = array[4] / 100;
                var percentage2 = array[5] / 100;
                var weightIndividual = 0.05 / 4;
                array[2] = percentage1 * weightIndividual;
                array[3] = percentage2 * weightIndividual;
                array[4] = percentage1 * weightIndividual;
                array[5] = percentage1 * weightIndividual;
            }
            else {
                console.log('Assignments are out of bounds.');
            }

            if (array[6] >= 0 && array[6] <= 50) {
                var percentage = array[6] / 50;
                array[6] = percentage * .1;
            }
            else {
                console.log('Midterm is out of bounds.');
            }

            if (array[7] >= 0 && array[7] <= 100) {
                var percentage = array[7] / 100;
                array[7] = percentage * .4;
            }
            else {
                console.log('Final Exam is out of bounds.');
            }

            if (array[8] >= 0 && array[8] <= 25) {
                var percentage = array[8] / 25;
                array[8] = percentage * .25;
            }
            else {
                console.log('Project is out bounds.');
            }

            for (i = 0; i < array.length; i++) {
                totalScore += array[i];
            }

            functionB();
        }

        function functionB() {
            try{
                switch (totalScore) {
                    case (totalScore >= 90):
                        document.getElementById('result').innerHTML = 'A';
                        break;
                    case (totalScore < 90 && totalScore >= 80):
                        document.getElementById('result').innerHTML = 'B';
                        break;
                    case (totalScore < 80 && totalScore >= 70):
                        document.getElementById('result').innerHTML = 'C';
                        break;
                    case (totalScore < 70 && totalScore >= 60):
                        document.getElementById('result').innerHTML = 'D';
                        break;
                    case (totalScore < 60):
                        document.getElementById('result').innerHTML = 'F';
                }
            }
            catch(e){
                alert('Grades aren\'t all in yet.');
            }
        }
    </script>
    <style>
        h1 {
            text-align: center;
        }
    </style>

    <h1>Grade Input</h1>
    <form name="grades" id="grades" onsubmit="return functionA(array[quiz1, quiz2, assignment1, assignment2,
        assignment3, assignment4, midterm, final, project])">
        Enter grade for quiz 1:<br />
        <input id="quiz1" name="quiz1" type="number"><br />
        Enter grade for quiz 2:<br />
        <input id="quiz2" name="quiz2" type="number"><br />
        Enter grade for assignment1:<br />
        <input id="assignment1" name="assignment1" type="number"><br />
        Enter grade for assignment2:<br />
        <input id="assignment2" name="assignment2" type="number"><br />
        Enter grade for assignment3:<br />
        <input id="assignment3" name="assignment3" type="number"><br />
        Enter grade for assignment4:<br />
        <input id="assignment4" name="assignment4" type="number"><br />
        Enter grade for midterm exam:<br />
        <input id="midterm" name="midterm" type="number"><br />
        Enter grade for final exam:<br />
        <input id="final" name="final" typ="number"><br />
        Enter grade for project:<br />
        <input id="project" name="project" type="number"><br />
        <button type="submit" form="grades" value="submit">Submit</button>
    </form>
    <p id="result">
        Your: grade is:
    </p>
</body>
</html>
javascript html css html5 css3
1个回答
0
投票

我在这里找到了成功的代码：

<!DOCTYPE>
<html>
<head>
    <title>Feb 26th</title>
</head>
<body bgcolor="gray">
    <script type="text/javascript">
        var totalScore = 0;
        
        function functionA(array) {
            if (!(array.length == 9) || !(Array.isArray(array))){
                return false;
            }
            console.log(array);

            if ((array[0] >= 0 && array[0] <= 10) && (array[1] >= 0 && array[1] <= 10)) {
                var percentage1 = array[0] / 10;
                var percentage2 = array[1] / 10;
                var weightIndividual = 0.05 / 2;
                array[0] = percentage1 * weightIndividual;
                array[1] = percentage2 * weightIndividual;
            }
            else {
                console.log('Quizes are out of bounds.');
            }

            if ((array[2] >= 0 && array[2] <= 100) && (array[3] >= 0 && array[3] <= 100) &&
                (array[4] >= 0 && array[4] <= 100) && (array[5] >= 0 && array[5] <= 100)) {
                var percentage1 = array[2] / 100;
                var percentage2 = array[3] / 100;
                var percentage2 = array[4] / 100;
                var percentage2 = array[5] / 100;
                var weightIndividual = 0.05 / 4;
                array[2] = percentage1 * weightIndividual;
                array[3] = percentage2 * weightIndividual;
                array[4] = percentage1 * weightIndividual;
                array[5] = percentage1 * weightIndividual;
            }
            else {
                console.log('Assignments are out of bounds.');
            }

            if (array[6] >= 0 && array[6] <= 50) {
                var percentage = array[6] / 50;
                array[6] = percentage * .1;
            }
            else {
                console.log('Midterm is out of bounds.');
            }

            if (array[7] >= 0 && array[7] <= 100) {
                var percentage = array[7] / 100;
                array[7] = percentage * .4;
            }
            else {
                console.log('Final Exam is out of bounds.');
            }

            if (array[8] >= 0 && array[8] <= 25) {
                var percentage = array[8] / 25;
                array[8] = percentage * .25;
            }
            else {
                console.log('Project is out bounds.');
            }

            for (i = 0; i < array.length; i++) {
                console.log('Adding value of: ' + array[i]);
                if (isNaN(array[i])) { array[i] = 0; };
                totalScore += Number.parseInt(array[i] * 100);
            }

            event.preventDefault();
            functionB();
        }

        function functionB() {
            console.log('xxxxxxxxxxxxxx: ' + totalScore);
            try {
                if (totalScore >= 90) {
                    document.getElementById('result').innerHTML = 'A';
                } else if (totalScore < 90 && totalScore >= 80) {
                    document.getElementById('result').innerHTML = 'B';
                } else if (totalScore < 80 && totalScore >= 70) {
                    document.getElementById('result').innerHTML = 'C';
                } else if (totalScore < 70 && totalScore >= 60) {
                    document.getElementById('result').innerHTML = 'D';
                } else if (totalScore < 60) {
                    document.getElementById('result').innerHTML = 'F';
                }
            }
            catch(e){
                alert('Grades aren\'t all in yet.');
            }
        }
    </script>
    <style>
        h1 {
            text-align: center;
        }
    </style>

    <h1>Grade Input</h1>
    <form name="grades" id="grades" onsubmit="return functionA([document.getElementById('quiz1').value, document.getElementById('quiz2').value,
    document.getElementById('assignment1').value, document.getElementById('assignment2').value, document.getElementById('assignment3').value,
    document.getElementById('assignment4').value, document.getElementById('midterm').value, document.getElementById('final').value, document.getElementById('project').value])">
        Enter grade for quiz 1:<br />
        <input id="quiz1" name="quiz1" type="number"><br />
        Enter grade for quiz 2:<br />
        <input id="quiz2" name="quiz2" type="number"><br />
        Enter grade for assignment1:<br />
        <input id="assignment1" name="assignment1" type="number"><br />
        Enter grade for assignment2:<br />
        <input id="assignment2" name="assignment2" type="number"><br />
        Enter grade for assignment3:<br />
        <input id="assignment3" name="assignment3" type="number"><br />
        Enter grade for assignment4:<br />
        <input id="assignment4" name="assignment4" type="number"><br />
        Enter grade for midterm exam:<br />
        <input id="midterm" name="midterm" type="number"><br />
        Enter grade for final exam:<br />
        <input id="final" name="final" typ="number"><br />
        Enter grade for project:<br />
        <input id="project" name="project" type="number"><br />
        <button type="submit" form="grades" value="submit">Submit</button>
    </form>
    <p id="result">
        Your: grade is: 
    </p>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.