无法让输出框显示消息答案

【问题标题】：Cant get outputbox to display message无法让输出框显示消息
【发布时间】：2018-10-23 03:57:21
【问题描述】：

我正在尝试制作一个允许您计算成绩的网站，但我无法让它将最终变量吐出到输出框中，我已经尝试了一个多小时，但无法弄清楚我做错了。

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

【问题讨论】：

标签： javascript html output

【解决方案1】：

有错别字，把onlclick改成onclick。

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

【讨论】：

【解决方案2】：

您在“计算成绩”按钮中打错了字。将onlclick改为onclick，例如：

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

【讨论】：