如何在JavaScript中计算和显示值

我创建了一个表格，用于根据考试结果计算期末成绩。 计算最终成绩的最终分数最终分数=（（实验室（10）+作业（20）+期末考试（70））/100

---

单击“计算”按钮时，应计算最终分数，并在命名的txtFinalGr文本框中显示相关的最终分数。 计算后，应在txtFinalGr上显示

我尝试了更多次以获得结果。但没有显示。我需要帮助来修复这些错误

表单代码如下所示

    <form id="gradeForm"> 
    <table>
        <tr>
            <td><label>Labs</label></td>
            <td><input type="text" id="txtLabs" name="txtLabs"></td>
        </tr>
        <tr>
            <td><label>Assignment</label></td>
            <td><input type="text" id="txtAssign" name="txtAssign"></td>
        </tr>
        <tr>
            <td><label>Final Exam</label></td>
            <td><input type="text" id="txtFinalEx" name="txtFinalEx"></td>
        </tr>
        <tr>
            <td><label>Final Grade</label></td>
            <td><input type="text" id="txtFinalGr" readonly></span></td>
        </tr>
        <tr>
            <td><input type="button" id="btnClr" onClick="clrForm()" name="btnClr" value="Clear"></td>
            <td><input type="button" id="bunCal" onClick="getGrade()" name="bunCal" value="Calculate"></td>
        </tr>
    </table>
</form>

    <script>
    function getGrade(){

        var grade = "";  //declare a variable for grade
                

                //read the marks
                var resLabs = document.getElementById('txtLabs').value;
                var resAssign = document.getElementById('txtAssign').value;
                var resFinalEx = document.getElementById('txtFinalEx').value;
                
                var calRes = (($resLabs*10)+($resAssign*20)+($resFinal*70))/100;
                                
                switch(

                        (calRes > 75 && calRes <= 100) ? 1 : 
                        (calRes > 60 && calRes < 74) ? 2 : 
                        (calRes > 50 && calRes < 59) ? 3 :
                        (calRes > 40 && calRes < 49) ? 4 :
                        (calRes > 30 && calRes < 39) ? 5 : 
                        (calRes > 0 && calRes < 29) ? 6 
                      )
                        
                        {
                            case 1 :grade = "A";break;
                            case 2 :grade = "B";break;
                            case 3 :grade = "C";break;
                            case 4 :grade = "D";break;
                            case 5 :grade = "E";break;
                            case 6 :grade = "F";break;
                        }
                        
                    

                document.getElementById('txtFinalGr').value = grade;    
    
    }

    function clrForm() {
        document.getElementById("gradeForm").reset();
    }
</script>

实验室
分配
期末考试
期末成绩

另外，脚本如下所示

    <form id="gradeForm"> 
    <table>
        <tr>
            <td><label>Labs</label></td>
            <td><input type="text" id="txtLabs" name="txtLabs"></td>
        </tr>
        <tr>
            <td><label>Assignment</label></td>
            <td><input type="text" id="txtAssign" name="txtAssign"></td>
        </tr>
        <tr>
            <td><label>Final Exam</label></td>
            <td><input type="text" id="txtFinalEx" name="txtFinalEx"></td>
        </tr>
        <tr>
            <td><label>Final Grade</label></td>
            <td><input type="text" id="txtFinalGr" readonly></span></td>
        </tr>
        <tr>
            <td><input type="button" id="btnClr" onClick="clrForm()" name="btnClr" value="Clear"></td>
            <td><input type="button" id="bunCal" onClick="getGrade()" name="bunCal" value="Calculate"></td>
        </tr>
    </table>
</form>

    <script>
    function getGrade(){

        var grade = "";  //declare a variable for grade
                

                //read the marks
                var resLabs = document.getElementById('txtLabs').value;
                var resAssign = document.getElementById('txtAssign').value;
                var resFinalEx = document.getElementById('txtFinalEx').value;
                
                var calRes = (($resLabs*10)+($resAssign*20)+($resFinal*70))/100;
                                
                switch(

                        (calRes > 75 && calRes <= 100) ? 1 : 
                        (calRes > 60 && calRes < 74) ? 2 : 
                        (calRes > 50 && calRes < 59) ? 3 :
                        (calRes > 40 && calRes < 49) ? 4 :
                        (calRes > 30 && calRes < 39) ? 5 : 
                        (calRes > 0 && calRes < 29) ? 6 
                      )
                        
                        {
                            case 1 :grade = "A";break;
                            case 2 :grade = "B";break;
                            case 3 :grade = "C";break;
                            case 4 :grade = "D";break;
                            case 5 :grade = "E";break;
                            case 6 :grade = "F";break;
                        }
                        
                    

                document.getElementById('txtFinalGr').value = grade;    
    
    }

    function clrForm() {
        document.getElementById("gradeForm").reset();
    }
</script>

函数getGrade（）{
var grade=”“；//为grade声明一个变量
//读标记
var resLabs=document.getElementById（'txtLabs'）.value；
var resAssign=document.getElementById（'txtAssign'）.value；
var resFinalEx=document.getElementById（'txtFinalEx'）.value；
var calRes=（$resLabs*10）+（$resAssign*20）+（$resFinal*70））/100；
开关(
（calRes>75和&calRes 60和&calRes<74）？2：
（calRes>50和&calRes<59）？3：
（calRes>40和&calRes<49）？4：
（calRes>30和&calRes<39）？5：
（calRes>0&&calRes<29）？6
)
{
案例1:grade=“A”级断裂；
案例2：grade=“B”断裂；
案例3:grade=“C”断裂；
案例4：grade=“D”断裂；
案例5:grade=“E”级断裂；
案例6：grade=“F”断裂；
}
document.getElementById（'txtFinalGr'）。值=等级；
}
函数clrForm（）{
document.getElementById（“gradeForm”）.reset（）；
}

---

谢谢！！

JavaScript代码中的

开关
语句写错了

这是正确的语法：

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

如果您查看控制台，就会在
Switch
语句中发现语法错误

您需要在
开关
关键字后使用花括号，因此将正常做法“
”
”替换为花括号“
{}
”
您的代码有几个问题：


变量名不匹配，例如，
resLabs
vs
$resLabs
。名称必须始终完全相同；例如，两者都不带$，或者两者都带$（$没有特殊含义，它只是一个可以作为变量名一部分的字符）
您可以将输入框值当作数字来使用，但实际上它们是字符串。最好使用
parseFloat（）
或
parseInt（）
你除以100，这只有在分数从1到100的情况下才有意义。如果分数从1到10（这在我居住的地方是正常的），那么你需要除以10。我一直在使用下面的
/100
，所以分数需要从1到100
您的
开关
非常复杂，它遗漏了一系列情况。例如，当
calRes
为74或75时，则没有与之匹配的条件。我在下面修复了此问题。（甚至可以进一步简化，请参阅下文）
最后一个三元运算符
？6
没有所需的
：
，因此代码不会编译
代码假定“愉快输入”：它只期望有效的分数（在本例中为1…100）。如果有人键入“ABC”或“12345”

以下是修复大多数问题的版本：


函数getGrade（）{
var grade=”“；//为grade声明一个变量
//读标记
var resLabs=parseFloat（document.getElementById（'txtLabs'）.value）；
var resAssign=parseFloat（document.getElementById（'txtsassign'）.value）；
var resFinalEx=parseFloat（document.getElementById（'txtFinalEx'）.value）；
var calRes=（（resLabs*10）+（resAssign*20）+（resFinalEx*70））/100；
控制台日志（“calRes:+calRes”）；
开关(
（calRes>75和&calRes 60）？2：
（calRes>50）？3：
（calRes>40）？4：
（calRes>30）？5：
（calRes>0）？6:0
)
{
案例1：
等级=“A”；
打破
案例2：
等级=“B”；
打破
案例3：
等级=“C”；
打破
案例4：
职系=“D”；
打破
案例5：
等级=“E”；
打破
案例6：
等级=“F”；
打破
违约：
等级=“？”；
打破
}
document.getElementById（'txtFinalGr'）。值=等级；
}

实验室
分配
期末考试
期末成绩
“它不工作”不是问题描述。您需要提供一个允许重现问题的模板，以及调试信息和清晰的问题描述。表单有4个文本框。单击“计算”按钮时，应计算最终分数，并在命名的txtFinalGr文本框上显示相关的最终分数。最终分数我知道还有其他问题没有在我的答案中提及。因此，如果有人知道这些问题，你可以编辑我的答案并提及它们