title: Javascript document.getElement innerHTML undefined
body: <p>I am trying to make the outcome of a function appear in a  element outside the script. Instead of the outcome I get an "undefined" message. It is probably just a matter of syntax, but I don't get it to work.</p>
  
  <p>Here is what I did:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  
  
  &lt;/head&gt;&lt;body&gt; 
  &lt;table class="mytable"&gt;    
  &lt;tr&gt;
  
  &lt;p&gt;&lt;span id="number1"&gt;1&lt;/span&gt;&lt;span&gt; + &lt;/span&gt;&lt;span id="number2"&gt;2&lt;/span&gt;&lt;span&gt; = &lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;span id="sr"&gt;here goes the range of solutions to select of&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;span id="quote"&gt;here goes the quote&lt;/span&gt;&lt;/p&gt;
  &lt;/table&gt;
  &lt;form id="myForm"&gt;
  &lt;div id="display" style="height: 20px; width: 100%;"&gt;&lt;/div&gt;
   
  &lt;script&gt;
  
  var plusorminus1 = Math.random() &lt; 0.5 ? -1 : 1;
  var plusorminus2 = Math.random() &lt; 0.5 ? -1 : 1;
  var plusorminus3 = Math.random() &lt; 0.5 ? -1 : 1;
  var plusorminus4 = Math.random() &lt; 0.5 ? -1 : 1;
  var plusorminus5 = Math.random() &lt; 0.5 ? -1 : 1;
  var plusorminus6 = Math.random() &lt; 0.5 ? -1 : 1;
  var plusorminus7 = Math.random() &lt; 0.5 ? -1 : 1;
  
  function sortfunction(a, b){
      return (a - b) 
  }
  
  var number1;
  var number2;
  
  number1 = Math.floor((Math.random() * 15) + 1);
  number2 = Math.floor((Math.random() * 15) + 1);
  document.getElementById("number1").innerHTML = number1;
  document.getElementById("number2").innerHTML = number2;
  
  var answer = parseInt(number1,10)+parseInt(number2,10);
  
  var addarr = []
  while(addarr.length &lt; 7){
      var randomnumber = Math.ceil(Math.random()*10)
      if(addarr.indexOf(randomnumber) &gt; -1) continue;
      addarr[addarr.length] = randomnumber;
  }
  
  var var1 = answer;
  var var2 = answer + (plusorminus1 * addarr[0]);
  var var3 = answer + (plusorminus2 * addarr[1]);
  var var4 = answer + (plusorminus3 * addarr[2]);
  var var5 = answer + (plusorminus4 * addarr[3]);
  var var6 = answer + (plusorminus5 * addarr[3]);
  var var7 = answer + (plusorminus6 * addarr[3]);
  
  var myarray=[var1,var2,var3,var4,var5,var6,var7]; 
     myarray=myarray.sort(sortfunction);
  
  
  for(var i = 0; i &lt; myarray.length; i++)
  {
   var sr = (function(val) {
          btn = document.createElement('button');
          btn.data = val;
          btn.innerHTML = val;
          btn.addEventListener('click', checkAnswer);
          document.body.appendChild(btn);
    return btn.data = val;
      })(myarray[i]);
  document.getElementById("sr").innerHTML = sr; //only shows the last value in the array
  }
  
  
  function checkAnswer(evt) {
      if (evt.target.data == answer) {
          display.innerHTML = ("correct");
      } else {
          display.innerHTML = ("Not correct");
      }
  document.getElementById("quote").innerHTML = evt.target.data; //does not work
  }
  &lt;/script&gt;
  
  &lt;/FORM&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, what I want is the following:<br>
  - show the range of answers to select from within the span above.<br>
  - show the answer (correct/not correct) in the span above.<br>
  Well, maybe it is possible to make the whole code more elegant, but these are my predominant problems here.</p>