title: Javascript innerHtml quiz results
body: <p>I want to return the output of the score from a three button radio button quiz. I have the ouput working when I use alert but as the quiz is contained within a modal I don't want a popup I just want to display the output as within the modal to make it look cleaner I'm using InnerHTML however when I click the button I now get no output. I've been experimenting with using JQuery to try and show the results and hide the button but this isn't helping either. Does anyone know how I can  get the results to print to "results"?</p>
  
  <p>Thanks</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-js lang-js prettyprint-override"><code>&lt;script&gt;
            
  var answers = ["A","B","B"], 
      tot = answers.length;
  
  function getCheckedValue( radioName ){
      var radios = document.getElementsByName( radioName ); // Get radio group by-name
      for(var y=0; y&lt;radios.length; y++)
        if(radios[y].checked) return radios[y].value; // return the checked value
  }
  
  function getScore(){
    var score = 0;
    for (var i=0; i&lt;tot; i++)
      if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only
    return score;
  }
  
  function returnScore(){
    print("Your score is "+ getScore() +"/"+ tot);
  }
  &lt;/script&gt;
  
  var answers = ["A","B","B"], 
      tot = answers.length;
  
  function getCheckedValue( radioName ){
      var radios = document.getElementsByName( radioName ); // Get radio group by-name
      for(var y=0; y&lt;radios.length; y++)
        if(radios[y].checked) return radios[y].value; // return the checked value
  }
  
  function getScore(){
    var score = 0;
    for (var i=0; i&lt;tot; i++)
      if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only
    return score;
  }
  
  function returnScore(){
    document.getElementById("results").innerHtml ("Well done! You scored "+ getScore() +"/"+ tot);
    
  }
  &lt;/script&gt;
   
                  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                &lt;p&gt; You are only charged interest on the amount that is remaining at the end of the month&lt;br&gt;
                  &lt;input type="radio" name="question0" value="A"&gt; True &lt;/radio&gt; 
                  &lt;input type="radio" name="question0" value="B"&gt; False &lt;/radio&gt; &lt;br&gt;&lt;hr&gt;
                 &lt;/p&gt;
                 
                 &lt;p&gt;I have to pay off the balance in full every month &lt;br&gt;&lt;p&gt;
                  &lt;input type="radio" name="question1" value="A"&gt; True &lt;/radio&gt; 
                  &lt;input type="radio" name="question1" value="B"&gt; False &lt;/radio&gt; &lt;br&gt; &lt;hr&gt;
                 
                 
                 &lt;p&gt;If I don't make a payment my credit score will be unaffected &lt;br&gt;&lt;/p&gt;
                  &lt;input type="radio" name="question2" value="A"&gt; True &lt;/radio&gt; 
                  &lt;input type="radio" name="question2" value="B"&gt; False &lt;/radio&gt;
      
  
                  &lt;br&gt;&lt;br&gt;
                  
                  &lt;button type="button" class="btn btn-primary btn-xl page-scroll" onclick = "returnScore()"&gt;Results&lt;/button&gt;
  
  &lt;h4 id="results"&gt; &lt;/h4&gt;
                  </code></pre>
  </div>
  </div>
  </p>