title: How to display javascript results on the same page
body: <p>I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page underneath the Calculate Button. Here is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="styles/formula_styles.css"&gt;
  
   &lt;script type="text/javascript"&gt;
  
    var a,b,c;
    function setValues1()
    {
     a = Number(document.getElementById("a").value);
     b = Number(document.getElementById("b").value);
     c = Number(document.getElementById("c").value);
    }
  
    function and()
    {
     setValues1();
     result1 = (-b + Math.sqrt(b*b -4*a*c))/(2*a);
     result2 = (-b - Math.sqrt(b*b -4*a*c))/(2*a);
     alert("The volume of this cube is " +result1 + " and " +result2);
    }
  
   &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav&gt;
   &lt;a href="index.html"&gt;Home&lt;/a&gt; // &lt;a href="levels.html"&gt;Grade Levels&lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;div id="container"&gt;
   &lt;div id="formula"&gt; 
    &lt;input type="text" id="a" placeholder="'A' Variable"/&gt;&lt;br&gt;
    &lt;input type="text" id="b" placeholder="'B' Variable"/&gt;&lt;br&gt;
    &lt;input type="text" id="c" placeholder="'C' Variable"/&gt;&lt;br&gt;
    &lt;input type="button" onclick="and()" value="Calculate!"/&gt;
   &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>