title: DOM/Javascript not returning a value, results yield NAN. Can't find the error?
body: <p>I have a logic error and cant seem to find it.  I think I am "getting" the elements by ID correctly, but it yields NAN.  Any help with this is appreciated.<br>
  I am not sure what else I am doing wrong, any suggestions are welcome. I am new to DOM and not very familiar with Javascript.</p>
  
  <pre><code>var avgGrade
  function calcAvg()
     {
      avgGrade = document.getElementById("finalExam") +    
  document.getElementById("homework") + document.getElementById("projects");
          alert("Your average is " + avgGrade);
      document.getElementById("stuAverage").value = avgGrade;
     }
  
  //--&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Calculate average&lt;/h1&gt;
  &lt;h3&gt;Enter the following information and then press the &lt;b&gt;AVERAGE&lt;/b&gt; button 
  
  to calculate 
  your grade.&lt;/h3&gt;
  &lt;p&gt;To clear the data fields, click here &lt;b&gt;&lt;a 
  
  href="javascript:location.reload(true)"&gt;Refresh this page&lt;/a&gt;&lt;/b&gt;&lt;/p&gt;
  &lt;form action="#" name="gradeInfo" id="gradeInfo"&gt;
  &lt;p&gt;
  Enter Final Exam Grade:
  &lt;input type="text" name="finalExam" id="finalExam" size="4" /&gt;&lt;br /&gt;
  Enter Homework Grade:
  &lt;input type="text" name="homework" id="homework" size="4" /&gt;&lt;br /&gt;
  Enter Projects Grade:
  &lt;input type="text" name="projects" id="projects" size="4" /&gt;&lt;br /&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;input type="button" value="AVERAGE" onclick="calcAvg()" /&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  Your Average is:
  &lt;input type="text" name="stuAverage" id="stuAverage" size="4" /&gt;&lt;br /&gt;
  &lt;/p&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>