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

【问题标题】：Issue changing innerHTML of basic HTML/Javascript page更改基本 HTML/Javascript 页面的 innerHTML 问题
【发布时间】：2015-01-01 16:32:28
【问题描述】：

我有一个 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>

【问题讨论】：

在这里工作：jsfiddle.net/oz3jcjdq，刚刚添加了onsubmit="return calculateGrade()" 以确保表单没有更改页面。 旁注： form 不是 css display 属性的 valid value

标签： javascript html forms innerhtml

【解决方案1】：

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

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

作为

【讨论】：

谢谢。这修复了我的简化代码，但我的较长版本仍然中断，所以我的 JavaScript 肯定有更多问题。感谢您的帮助。
很高兴它有帮助。好的，然后尝试自己修复它，如果你做不到，只需将它发布在 SO 中，你肯定会得到你想要的。

【解决方案2】：

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

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

【讨论】：

我先尝试了 chsdk 的修复，它成功了，但非常感谢您的帮助。