Javascript GPA计算器打印问题

Question

My code(shown below) doesn't seem to be working and I can't figure out why.我的代码（如下所示）似乎不起作用，我不知道为什么。 When I open the webpage in my browser, I am able to take in user inputs for the credits(1,2,3,4,5) and the scores(A,B,C,D,F) but I am unable to display the calculated GPA under the input table.当我在浏览器中打开网页时，我可以接收用户输入的积分（1、2、3、4、5）和分数（A、B、C、D、F），但我无法在输入表下显示计算出的 GPA。 Is there an error in the calculation or in my printing?计算或打印是否有错误？ I have looked up similar questions but the method and issues seem to be different from mine.我查找了类似的问题，但方法和问题似乎与我的不同。 I'm fairly new at this I would really appreciate some help on where I'm going wrong.我在这方面还很陌生，我真的很感激一些关于我哪里出错的帮助。

EDIT: Made a few changes as per comments, but it still doesn't work编辑：根据评论进行了一些更改，但它仍然不起作用

The code is as follows:代码如下：

<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>

Answer 1

var score[5] = {A,B,C,D,f}; var score[5] = {A,B,C,D,f}; this is invalid syntax, in javascript you cannot fix the size of the array with the variable name.这是无效的语法，在 javascript 中，您无法使用变量名称修复数组的大小。 You can try doing this你可以尝试这样做

var score = [A,B,C,D,F]

also replace the curly brackets with the square ones.也用方括号替换大括号。

Answer 2

var A,B,C,D,E;

declares those variables with default value, which is undefined用undefined的默认值声明这些变量

var score = [A,B,C,D,F];

collects those values (not the variables, and certainly not their names) in an array.将这些值（不是变量，当然也不是它们的名称）收集到一个数组中。 Then the if tries to compare those undefined -s to something.然后if尝试将那些undefined的 -s 与某些东西进行比较。

What you actually need is an array of the text markings A,B...您真正需要的是一组文本标记 A,B ...

var score = ["A", "B", "C", "D", "E"];

(and the var A,B,C,D,E; line is not needed at all) （和var A,B,C,D,E;线根本不需要）

The <script> tag at the end is both broken and unnecessary.末尾的<script>标记既损坏又不必要。 The gpa() function could display the result instead of returning it ( onclick=... does not do anything with returned results anyway). gpa() function 可以显示结果而不是返回它（ onclick=...无论如何都不会对返回的结果做任何事情）。 You can try document.write(gpa2);你可以试试document.write(gpa2); , though it will replace everything. ，尽管它将取代一切。 Or just add a <div id="result"></div> somewhere (like below the form), and then gpa() could end with result.innerText=gpa2;或者只是在某处添加一个<div id="result"></div> （如表单下方），然后gpa()可以以result.innerText=gpa2;结尾. .

From the top of my head I do not remember if the document.calcForm.something -s really work, but if you add id -s (like in the suggested result ), they work for sure.从我的脑海中，我不记得document.calcForm.something -s 是否真的有效，但如果你添加id -s （如在建议的result中），它们肯定有效。

For your follow-up question: style is changed via changing, style : 对于您的后续问题： style is changed via changed, style ：

 function doThing(){ var idx=["A","C","D"].indexOf(grade.value.toUpperCase()); if(idx===-1){ result.innerText="Invalid grade. Only A, C and D are permitted."; result.style="background:red;color:white"; } else { result.innerText="Numerical value: "+[1,3,4][idx]; result.style="background:green;color:yellow"; } }

 <form action="#"> <input type="text" id="grade"> <button type="button" onclick="doThing()">Clicky</button> </form> <div id="result">Result comes here</div>

Answer 3

I don't want to just give you the answer, but I think if I give you this, you can kind of see the differences between how you were trying to do it and a working example.我不想只给你答案，但我想如果我给你这个，你可以看到你尝试做的方式和一个工作示例之间的区别。 It may even shed light on some aspects of JS that you weren't aware of.它甚至可以揭示您不知道的 JS 的某些方面。 I'll leave the styling up to you, for the most part:)在大多数情况下，我将把样式留给你：）

 <.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>

Javascript GPA计算器打印问题

问题描述

3 个解决方案

解决方案1
0 2019-10-05 20:45:01

解决方案2
0 2019-10-05 22:35:14

解决方案3
0 2019-10-05 22:39:01

Javascript GPA计算器打印问题

问题描述

3 个解决方案

解决方案1 0 2019-10-05 20:45:01

解决方案2 0 2019-10-05 22:35:14

解决方案3 0 2019-10-05 22:39:01

解决方案1
0 2019-10-05 20:45:01

解决方案2
0 2019-10-05 22:35:14

解决方案3
0 2019-10-05 22:39:01