时间戳

首页 > 解决方案 > 解析浮动和按钮单击

javascript - 解析浮动和按钮单击

问题描述

使用 parsefloat 计算用户输入的值时遇到问题。我一遍又一遍地查看我的代码，但无法确定错误发生在哪里。当我单击按钮时，没有按预期显示。

我已经查看了变量的代码和命名/id 属性。

<html>
<head>
  <title> Lab 4 Grade Calculator </title>
</head>

<body>
  <h2> Grade Calculation</h2>
  <p>
    Enter your name: <input type="text" id="nameBox" size=12 value=""><br><br> Homework average: <input type="text" id="homeworkBox" value=""><br><br> Lab Average: <input type="text" id="labBox" value=""><br><br> Midterm Average: <input type="text" id="midtermBox"
      value=""><br><br> Final Exam score: <input type="text" id="examBox" value=""><br><br>
  </p>
  <br>
  <!-- Start input button -->
  <input type="button" value="Calculate Course Grade" onclick="homework=parseFloat(document.getElementById('homeworkBox').value);
    labs=parseFloat(document.getElementById('labsBox').value);
    
    midterm=parseFloat(document.getElementById('midtermBox').value);

    finalexam=parseFloat(document.getElementById('examBox').value);
    

    overall_Average = homework*0.25 + Labs*0.20 + midterm*0.25 + finalExam*0.30;
    

    document.getElementById('outputDiv').innerHTML = 'Hello '+ document.getElementById('nameBox').value+ ', your overall course average grade is: ' + overall_Average;">

  <!-- Close input button   -->
  <hr>
  <br><br>
  <div id="outputDiv"></div>
</body>
</html>

预期结果是计算用户输入值并将其显示在屏幕上。

标签： javascripthtml

解决方案

您有几个问题需要解决：

  1. Javascript 区分大小写，这意味着当您声明一个全小写字母（例如：）的变量时，labs您需要使用全小写字母来引用它（即：Labs与 不同labs）。您需要在代码中解决此问题。

  2. 您需要准确id了解您在 JS 中的 HTML 中指定的内容，以便您的代码正常工作：

    document.getElementById('labsBox').value

    以上应该是labBox，而不是labsBox你id的labBox。

  3. 不要在onclick方法回调中编写所有 javascript，将 javascript 写入<script>标签或单独的文件中，然后您可以调用函数来运行代码。这样，您可以将标记（页面结构“代码”）与逻辑分开。

  4. 当您不将 HTML 写入页面时，最好使用textContent而不是innerHTML

请参见下面的示例：

function calculateGrade() {
  var homework = parseFloat(document.getElementById('homeworkBox').value);
  var labs = parseFloat(document.getElementById('labBox').value);
  var midterm = parseFloat(document.getElementById('midtermBox').value);
  var finalexam = parseFloat(document.getElementById('examBox').value);
  var overall_Average = homework * 0.25 + labs * 0.20 + midterm * 0.25 + finalexam * 0.30;

  document.getElementById('outputDiv').textContent = 'Hello ' + document.getElementById('nameBox').value + ', your overall course average grade is: ' + overall_Average;
}
<html>

<head>
  <title> Lab 4 Grade Calculator </title>
</head>

<body>
  <h2> Grade Calculation</h2>
  <p>
    Enter your name: <input type="text" id="nameBox" size=12 value=""><br><br> Homework average: <input type="text" id="homeworkBox" value=""><br><br> Lab Average: <input type="text" id="labBox" value=""><br><br> Midterm Average: <input type="text" id="midtermBox"
      value=""><br><br> Final Exam score: <input type="text" id="examBox" value=""><br><br>
  </p>
  <br>
  <!-- Start input button -->
  <input type="button" value="Calculate Course Grade" onclick="calculateGrade()">

  <!-- Close input button   -->
  <hr>
  <br><br>
  <div id="outputDiv"></div>
</body>

</html>

推荐阅读