Question

我正在尝试创建一个可以计算成绩的网站，但无法将最终变量吐到输出框中，我已经尝试了一个多小时，无法弄清楚我的意思。做错了。

<html>
<head>
  <title>grade</title>

  <link href="../style.css" type="text/css" rel="stylesheet">

  <script type="text/javascript">
    function Grade() {
      var homework_grade = parseFloat(document.getElementById('homework').value);
      var lab_grade = parseFloat(document.getElementById('lab').value);
      var midterm1_grade = parseFloat(document.getElementById('midterm1').value);
      var midterm2_grade = parseFloat(document.getElementById('midterm2').value);
      var finalexam_grade = parseFloat(document.getElementById('finalexam').value);
      var project_grade = parseFloat(document.getElementById('project').value);
      var attendance_grade = parseFloat(document.getElementById('attendance').value);
      var midterm_total = midterm1_grade + midterm2_grade / 2;
      var course_grade = homework_grade * 0.15 + lab_grade * 0.20 + midterm_total * 0.20 + finalexam_grade * 0.10 + project_grade * 0.30 + attendance_grade * 0.05;

      document.getElementById("outputDiv").innerHTML = course_grade;
    }
  </script>
</head>

<body>
  <h1>Grade Calculator</h1>

  <p>Enter your average homework grade: <input type="numeric" id="homework" size="10" value="" /></p>
  <p>Enter your average lab grade: <input type="numeric" id="lab" size="10" value="" /></p>
  <p>Enter your first midterm grade: <input type="numeric" id="midterm1" size="10" value="" /></p>
  <p>Enter your second midterm grade: <input type="numeric" id="midterm2" size="10" value="" /></p>
  <p>Enter your final exam grade: <input type="numeric" id="finalexam" size="10" value="" /></p>
  <p>Enter your project grade: <input type="numeric" id="project" size="10" value="" /></p>
  <p>Enter your attendance grade: <input type="numeric" id="attendance" size="10" value="" /></p>

  <p><button value="Calculate Grade" onlclick="Grade();"> Calculate Grade </button></p>

  <p> Grade:
    <div class="OutputBox" type="text" id="outputDiv"> Output Message </div>
  </p>
</body>
</html>

Answer 1

有一个错字，请将onlclick更改为onclick。

为帮助调试，可以在函数的开头添加console.log("function called");，然后打开浏览器的控制台以查看是否调用了函数。它将打印消息function called，但您也可以打印变量值。

Answer 2

您已在“计算成绩”按钮中输入错误。将onlclick更改为onclick，例如：

<button value="Calculate Grade" onclick="Grade();"> Calculate Grade </button>

无法获取输出框以显示消息

2 个答案: