title: Trying to set a variable using document.getElementById('').innerHTML
body: <p>I am utterly new to JavaScript and am trying to self-learn a few things - so be gentle.</p>
  
  <p>I am trying to set a variable using document.getElementById(' ').innerHTML but I can't get it to work - I just get "undefined" returned when I try to use this variable.</p>
  
  <p>All of the examples I have seen says that this should work, but it isn't and I'm at my wits' end. Any help will be greatly appreciated.</p>
  
  <p>This is the code...</p>
  
  <pre><code>&lt;script&gt;
  var str = document.getElementById('str').innerHTML;
  
  function calc()
  {
    if(document.getElementById('checkbox').checked)
       document.getElementById('str').innerHTML = str ;     
    else
       document.getElementById('str').innerHTML='unchecked';
  }
  
  &lt;/script&gt;
  
  Checkbox: &lt;input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/&gt;
  &lt;div&gt;Str: &lt;span id="str"&gt;6&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My ultimate aim is to add a number to the variable "str" using another variable; so something like...</p>
  
  <pre><code>var str = document.getElementById('str').innerHTML;
  var add = 2
  function calc()
  {
    if(document.getElementById('checkbox').checked)
       document.getElementById('str').innerHTML = str + add;     
    else
       document.getElementById('str').innerHTML='unchecked';
  }
  </code></pre>
  
  <p>I'm aware that I probably need to parse the str variable as an integer for this, but I've stumbled before I've even got that far.</p>
  
  <p>Please help.</p>