问题

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

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

  最佳答案

你有一些需要解决的问题:

  1. JavaScript是案例敏感的,这意味着当您使用所有小写字母(例如:labs)声明变量时,您需要使用所有较低的案例字母(即:Labslabs不同)引用它.您需要在代码中解决这个问题.

  2. 您需要获得您在JS中的HTML中指定的准确的id,以便您的代码工作:

     document.getElementById('labsBox').value
     

    上面应该是labBox,而不是labsBox,因为你的idlabBox.

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

  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> 

  相同标签的其他问题

javascripthtml