时间戳

首页 > 解决方案 > Javascript GPA计算器打印问题

javascript - Javascript GPA计算器打印问题

问题描述

我的代码（如下所示）似乎不起作用，我不知道为什么。当我在浏览器中打开网页时，我可以接收用户输入的积分（1、2、3、4、5）和分数（A、B、C、D、F），但我无法在输入表下显示计算出的 GPA。计算或打印是否有错误？我查找了类似的问题，但方法和问题似乎与我的不同。我在这方面还很陌生，我真的很感激一些关于我哪里出错的帮助。

编辑：根据评论进行了一些更改，但它仍然不起作用

代码如下：

<html>

    <head>
    <meta charset= "utf-8">
    <title > GPA Calculator </title>

   <script type="text/javascript">

    function gpa(){
        var A,B,C,D,F;
        var score = [A,B,C,D,F];
        var credit = [4.0,3.0,2.0,1.0,0.0];
        var inputCredit = [document.calcForm.credit1.value, document.calcForm.credit2.value, document.calcForm.credit3.value,
                            document.calcForm.credit4.value, document.calcForm.credit5.value];
        var inputScore = [document.calcForm.score1.value, document.calcForm.score2.value, document.calcForm.score3.value,
                            document.calcForm.score4.value, document.calcForm.score5.value];

        var sumcr = 0;
        var sumsc = 0;
        var validity =0;
        for(var j=0; j<5; j++){
            for(var i=0; i<5;i++){
                if(inputScore[i] == score[j]){
                    sumsc += credit[j] * inputCredit[i];
                    sumcr += inputCredit[j];
                }
            }
        }

        var gpa2 = sumsc/sumcr;
        return gpa2;
    }

    </script>
    </head>
    <body>

    .....

        <script type="text/javascript">GPA: document.write(gpa());</script>

    </body>
</html>

标签： javascripthtml

解决方案

我不想只给你答案，但我想如果我给你这个，你可以看到你尝试做的方式和一个工作示例之间的区别。它甚至可以揭示您不知道的 JS 的某些方面。在大多数情况下，我将把样式留给你 :)

<!DOCTYPE html>
<html>

    <head>
      <title> GPA Calculator </title>
      <script type="text/javascript">
        function gpa(e) {
          e.preventDefault()
          const scores = document.getElementsByName("score")

          const credits = []
          scores.forEach(score => credits.push(Number(score.value)))

          const d = document.getElementById("result")
          d.innerText = "GPA: " + credits.reduce((acc, x) => {
            return acc + x
          })/scores.length;
        }
      </script>
    </head>

    <body bgcolor = "#CCEEFF" > 
        <h1 align ="center">GPA Calculator</h1>
        <form name ="calcForm" align="center">
        <div style="display: inline-block; width: 100%; padding-bottom: 10px">
          <label for="score" style="width: 50px">Calculus 2</label>
          <select name="score">
            <option value="" disabled selected>Select</option>
            <option value="4.0">A</option>
            <option value="3.0">B</option>
            <option value="2.0">C</option>
            <option value="1.0">D</option>
            <option value="0.0">F</option>
          </select>
        </div>
        <div style="display: inline-block; width: 100%; padding-bottom: 10px">
          <label for="score" style="width: 50px">Physics 2</label>
          <select name="score">
            <option value="" disabled selected>Select</option>
            <option value="4.0">A</option>
            <option value="3.0">B</option>
            <option value="2.0">C</option>
            <option value="1.0">D</option>
            <option value="0.0">F</option>
          </select>
        </div>
        <div style="display: inline-block; width: 100%; padding-bottom: 10px">
          <label for="score">History 3</label>
          <select name="score">
            <option value="" disabled selected>Select</option>
            <option value="4.0">A</option>
            <option value="3.0">B</option>
            <option value="2.0">C</option>
            <option value="1.0">D</option>
            <option value="0.0">F</option>
          </select>
        </div>
        <div style="display: inline-block; width: 100%; padding-bottom: 10px">
          <label for="score">Chemistry 2</label>
          <select name="score">
            <option value="" disabled selected>Select</option>
            <option value="4.0">A</option>
            <option value="3.0">B</option>
            <option value="2.0">C</option>
            <option value="1.0">D</option>
            <option value="0.0">F</option>
          </select>
        </div>
        <div style="display: inline-block; width: 100%; padding-bottom: 10px">
          <label for="score">Biology 3</label>
          <select name="score">
            <option value="" disabled selected>Select</option>
            <option value="4.0">A</option>
            <option value="3.0">B</option>
            <option value="2.0">C</option>
            <option value="1.0">D</option>
            <option value="0.0">F</option>
          </select>
        </div>
        <button type="click" onclick ="gpa(event)">Calculate GPA</button>
      </form>
      <div id="result" align="center" style="margin-top: 5px">GPA: </div>
    </body>
</html>

推荐阅读