title: Issue changing innerHTML of basic HTML/Javascript page
body: <p>I have an HTML/Javascript document that outputs the grade of a student based on the inputs of my form. The mechanics of the grade calculation should be working, but the final output does not. The main thing I'm honing in on is the <code>document.getElementById("span1").innerHTML</code> and span2's same code. I want these to change the inner HTML to the values I calculated with my code, but they remain at X and yy even when I attempt to change them. </p>
  
  <p>I think the error should be in my <code>calculateGrade</code> function or in my HTML. I did not include the rest of the code to simplify my post, so the error lay outside of where I think it does. I need the output paragraph to have the correct values, but they are not being changed.</p>
  
  <p>Even if I change the new innerHTML values to concrete values such as <code>P</code> and <code>88</code>, the code displays <code>X</code> and <code>yy</code> instead. I set a default "A" and "91" to test it and receive the same problem. I think there may be an issue with my form gets as changing the value of the name in the form also doesn't change my final output. </p>
  
  <p>This is my first Javascript/HTML project, and I'm very desperate to get it working. I'm already one day late, and in a couple hours, it will be two. I deeply appreciate any hep I can get. Thanks guys. Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Joe Peterson's Assignment 7&lt;/title&gt;
    &lt;script&gt;
      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;
      }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;p&gt;&lt;h1&gt;Joe Peterson's Assignment 7&lt;/h1&gt;&lt;/p&gt;
    &lt;form name="input" id="form1" onsubmit="calculateGrade()" style="display:form"&gt;
      First name: &lt;input type="text" name="FirstName" id="FirstName" value="Joe"&gt;&lt;br&gt;
      Last name: &lt;input type="text" name="LastName" id="LastName" value="Peterson"&gt;&lt;br&gt;
      Homework Scores (separate with commas): &lt;input type="text" name="HomeworkScores" id="HomeworkScores" value="90, 80, 98"&gt;&lt;br&gt;
      Activity Scores (separate with commas): &lt;input type="text" name="ActivityScores" id="ActivityScores" value="71, 65, 96"&gt;&lt;br&gt;
      Midterm Exam Percentage: &lt;input type="text" name="MidtermScore" id="MidtermScore" value="91"&gt;&lt;br&gt;
      Midterm Exam Letter Grade: &lt;input type="text" name="MidtermLetter" id="MidtermLetter" value="A"&gt;&lt;br&gt;
      Final Exam Percentage: &lt;input type="text" name="FinalScore" id="FinalScore" value="75"&gt;&lt;br&gt;
      Final Exam Letter Grade: &lt;input type="text" name="FinalLetter" id="FinalLetter" value="C"&gt;&lt;br&gt;
      &lt;input type="submit" value="Submit"&gt;
    &lt;/form&gt; 
  
    &lt;p id="p1" style="display:none"&gt;
      Final course grade for 
      &lt;span id="fname"&gt;Joe&lt;/span&gt; &lt;span id="lname"&gt;Peterson&lt;/span&gt; 
      is: &lt;span id="span1"&gt;X&lt;/span&gt; (&lt;span id="span2"&gt;yy&lt;/span&gt;%)
    &lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>