Question

我有一个HTML / Javascript文档，根据我的表单输入输出学生的成绩。等级计算的机制应该是有效的，但最终的输出却没有。我正在研究的主要内容是document.getElementById("span1").innerHTML和span2的相同代码。我希望这些将内部HTML更改为我使用我的代码计算的值，但即使我尝试更改它们，它们仍保留在X和yy。

我认为错误应该在我的calculateGrade函数或我的HTML中。我没有包含其余的代码来简化我的帖子，因此错误位于我认为的范围之外。我需要输出段落具有正确的值，但它们不会被更改。

即使我将新的innerHTML值更改为具体值（例如P和88），代码也会显示X和yy。我设置了默认的“A”和“91”来测试它并收到同样的问题。我认为我的表单可能存在问题，因为更改表单中名称的值也不会改变我的最终输出。

这是我的第一个Javascript / HTML项目，我非常渴望让它正常运行。我已经迟到了一天，在几个小时内，它将是两天。我非常感谢能得到的任何东西。多谢你们。这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <title>Joe Peterson's Assignment 7</title>
  <script>
    function calculateGrade(){
      document.getElementById("form1").style.display = "none";
      document.getElementById("p1").style.display = "block";
      alert(document.getElementById("FirstName").value);
      var fname = document.getElementById("LastName").value;
      var lname = document.getElementById("FirstName").value;
      var valMidterm = document.getElementById("MidtermScore").value;
      var valFinal = document.getElementById("FinalScore").value;
      var lMidterm = document.getElementById("MidtermLetter").value;
      var lFinal = document.getElementById("FinalLetter").value;
      var homeworkArray = document.getElementById("HomeworkScores").value.split(',');
      var classworkArray = document.getElementById("ActivityScores").value.split(',');

      var grade = "A";      
      var score = 91;

      document.getElementById("span1").innerHTML = (grade);
      document.getElementById("span2").innerHTML = (score);
      document.getElementById("fname").innerHTML = (fname);
      document.getElementById("lname").innerHTML = (lname);
      return false;
    }
    </script>
</head>

<body>
  <p><h1>Joe Peterson's Assignment 7</h1></p>
  <form name="input" id="form1" onsubmit="calculateGrade()" style="display:form">
    First name: <input type="text" name="FirstName" id="FirstName" value="Joe"><br>
    Last name: <input type="text" name="LastName" id="LastName" value="Peterson"><br>
    Homework Scores (separate with commas): <input type="text" name="HomeworkScores" id="HomeworkScores" value="90, 80, 98"><br>
    Activity Scores (separate with commas): <input type="text" name="ActivityScores" id="ActivityScores" value="71, 65, 96"><br>
    Midterm Exam Percentage: <input type="text" name="MidtermScore" id="MidtermScore" value="91"><br>
    Midterm Exam Letter Grade: <input type="text" name="MidtermLetter" id="MidtermLetter" value="A"><br>
    Final Exam Percentage: <input type="text" name="FinalScore" id="FinalScore" value="75"><br>
    Final Exam Letter Grade: <input type="text" name="FinalLetter" id="FinalLetter" value="C"><br>
    <input type="submit" value="Submit">
  </form> 

  <p id="p1" style="display:none">
    Final course grade for 
    <span id="fname">Joe</span> <span id="lname">Peterson</span> 
    is: <span id="span1">X</span> (<span id="span2">yy</span>%)
  </p>

</body>
</html>

Answer 1

像这样应该没问题......我只将输入类型改为“按钮”

   <!DOCTYPE html>
<html>

<head>
  <title>Joe Peterson's Assignment 7</title>
  <script>
    function calculateGrade(){
      document.getElementById("form1").style.display = "none";

      alert(document.getElementById("FirstName").value);
      var fname = document.getElementById("LastName").value;
      var lname = document.getElementById("FirstName").value;
      var valMidterm = document.getElementById("MidtermScore").value;
      var valFinal = document.getElementById("FinalScore").value;
      var lMidterm = document.getElementById("MidtermLetter").value;
      var lFinal = document.getElementById("FinalLetter").value;
      var homeworkArray = document.getElementById("HomeworkScores").value.split(',');
      var classworkArray = document.getElementById("ActivityScores").value.split(',');

      var grade = "A";      
      var score = 91;

      document.getElementById("span1").innerHTML = (grade);
      document.getElementById("span2").innerHTML = (score);
      document.getElementById("fname").innerHTML = (fname);
      document.getElementById("lname").innerHTML = (lname);
      document.getElementById("p1").style.display = "block";
      return false;
    }
    </script>
</head>

<body>
  <p><h1>Joe Peterson's Assignment 7</h1></p>
  <form name="input" id="form1"style="display:form">
    First name: <input type="text" name="FirstName" id="FirstName" value="Joe"><br>
    Last name: <input type="text" name="LastName" id="LastName" value="Peterson"><br>
    Homework Scores (separate with commas): <input type="text" name="HomeworkScores" id="HomeworkScores" value="90, 80, 98"><br>
    Activity Scores (separate with commas): <input type="text" name="ActivityScores" id="ActivityScores" value="71, 65, 96"><br>
    Midterm Exam Percentage: <input type="text" name="MidtermScore" id="MidtermScore" value="91"><br>
    Midterm Exam Letter Grade: <input type="text" name="MidtermLetter" id="MidtermLetter" value="A"><br>
    Final Exam Percentage: <input type="text" name="FinalScore" id="FinalScore" value="75"><br>
    Final Exam Letter Grade: <input type="text" name="FinalLetter" id="FinalLetter" value="C"><br>
    <input type="button" value="Submit" onclick="calculateGrade()">
  </form> 

  <p id="p1" style="display:none">
    Final course grade for 
    <span id="fname">Joe</span> <span id="lname">Peterson</span> 
    is: <span id="span1">X</span> (<span id="span2">yy</span>%)
  </p>

</body>
</html>

Answer 2

只需将警报调用移至函数末尾，它就可以正常工作：

function calculateGrade(){
  document.getElementById("form1").style.display = "none";
  document.getElementById("p1").style.display = "block";

  var fname = document.getElementById("LastName").value;
  var lname = document.getElementById("FirstName").value;
  var valMidterm = document.getElementById("MidtermScore").value;
  var valFinal = document.getElementById("FinalScore").value;
  var lMidterm = document.getElementById("MidtermLetter").value;
  var lFinal = document.getElementById("FinalLetter").value;
  var homeworkArray = document.getElementById("HomeworkScores").value.split(',');
  var classworkArray = document.getElementById("ActivityScores").value.split(',');

  var grade = "A";      
  var score = 91;

  document.getElementById("span1").innerHTML = grade;
  document.getElementById("span2").innerHTML = score;
  document.getElementById("fname").innerHTML = fname;
  document.getElementById("lname").innerHTML = lname;
  alert(document.getElementById("FirstName").value);

  return false;
}

并将表单操作设置为return calculateGrade()，并在评论中提到Patrick Evans。

here's a demo

和

一样

问题是更改基本HTML / Javascript页面的innerHTML

2 个答案: