javascript - 如何在 JavaScript 中计算和显示值

Question

我创建了一个表格，用于根据考试结果计算最终成绩。计算得出最终成绩的最终分数Final Mark=((Labs(10) + Assignment(20)+Final Exam(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>

谢谢 ！！

标签： javascripthtml

Answer 1

您的代码有几个问题：

• 变量名不匹配，例如。resLabs与$resLabs。名称必须始终完全相同；例如，两者都没有$，或者都带有$（$ 没有特殊含义，它只是一个可以作为变量名一部分的字符）。
• 您可以将输入框值当作数字来使用，但实际上这些是字符串。更好地使用parseFloat()或parseInt().
• 你除以 100，这只有在分数从 1 到 100 时才有意义。如果分数从 1 到 10（这在我住的地方很正常），那么你需要除以 10。我一直/ 100在下面使用，所以成绩需要从 1...100 开始。
• 你switch的很复杂，它错过了一堆案例。例如，当calRes是 74 或 75 时，则没有条件匹配它。我在下面修复了这个。（甚至可以进一步简化，见后文）
• 最后一个三元运算符? 6没有必需的:，因此代码将无法编译。
• 该代码假定“快乐输入”：它只需要有效的成绩（在本例中为 1...100）。如果有人输入“ABC”或“12345”怎么办......

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

function getGrade() {
  var grade = ""; //declare a variable for grade

  //read the marks
  var resLabs = parseFloat(document.getElementById('txtLabs').value);
  var resAssign = parseFloat(document.getElementById('txtAssign').value);
  var resFinalEx = parseFloat(document.getElementById('txtFinalEx').value);

  var calRes = ((resLabs * 10) + (resAssign * 20) + (resFinalEx * 70)) / 100;
  console.log("calRes: " + calRes);
  switch (
    (calRes > 75 && calRes <= 100) ? 1 :
    (calRes > 60) ? 2 :
    (calRes > 50) ? 3 :
    (calRes > 40) ? 4 :
    (calRes > 30) ? 5 :
    (calRes > 0) ? 6 : 0
  )
  {
    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;
    default:
      grade = "???";
      break;
  }
  document.getElementById('txtFinalGr').value = grade;
}

<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><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>
    <tr>
      <td><label>Final Grade</label></td>
      <td><input type="text" id="txtFinalGr" readonly></td>
    </tr>
  </table>
</form>

这是被switch淘汰的版本，因为它只会增加复杂性 + 更好地检查无效值：

function getGrade() {
  var resLabs = parseFloat(document.getElementById('txtLabs').value);
  var resAssign = parseFloat(document.getElementById('txtAssign').value);
  var resFinalEx = parseFloat(document.getElementById('txtFinalEx').value);

  var calRes = ((resLabs * 10) + (resAssign * 20) + (resFinalEx * 70)) / 100;
  console.log("calRes: " + calRes);
  var grade =
    (isNaN(calRes) || calRes < 0 || calRes > 100) ? "???" :
    (calRes > 75) ? "A" :
    (calRes > 60) ? "B" :
    (calRes > 50) ? "C" :
    (calRes > 40) ? "D" :
    (calRes > 30) ? "E" : "F";
  document.getElementById('txtFinalGr').value = grade;
}

<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><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>
    <tr>
      <td><label>Final Grade</label></td>
      <td><input type="text" id="txtFinalGr" readonly></td>
    </tr>
  </table>
</form>