title: Is there a way to display content on same page after a button is clicked?
body: <p>I am trying to get my content to display on the same page as my button. But when i enter the values and press display the square i am forming is displayed on a new white webpage.</p>
  
  <p>I ask the user to enter two values (height and width), I also ask for a character to form the border of the square, but i have not been able to do that part yet so i just hard coded a # character in for the border in the meantime</p>
  
  <p>What i would like to know is how to display my square on the same page and not in a seperate page.</p>
  
  <p>I use an external JavaScript file: Here is its code. Its named "SquareScript.js":</p>
  
  <pre><code>function Display()
  {
  var a = document.getElementById("value1").value;
  var b = document.getElementById("value2").value;
  var outputText = "";
  
  for (var i = 0; i &lt; a; i++)
  {
  outputText += "#";
  }
  
  outputText +="&lt;br&gt;";
  for (var r = 0; r &lt; b; r++)
  {
  outputText += "#";
  
  
  for(var p = 0; p &lt; a-2; p++)
  {
  outputText +="&amp;nbsp&amp;nbsp";
  }
  outputText += "#";
  outputText +="&lt;br&gt;";
  }
  
  for (var i = 0; i &lt; a; i++)
  {
  outputText += "#";
  }
  
  }
  </code></pre>
  
  <p>Here is my webpages code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;link rel = "stylesheet" type = "text/css" href = "Assignment3.css"&gt;
          &lt;style&gt;
              table {background-color:white;color:black;}
              body {background-image: url('squares.png');}
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class = "heading"&gt;
              &lt;h1&gt;&lt;img src = "Interested.png" width = 100px height = 100px&gt;&lt;/img&gt;WELCOME TO BUILD A   SQUARE&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;script src = "SquareScript.js"&gt;
          &lt;/script&gt;
  
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Please Enter value number 1:&amp;nbsp&amp;nbsp&lt;input type = "text" id = "value1"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;
                      Please Enter value number 2:&amp;nbsp&amp;nbsp&lt;input type = "text" id = "value2"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;
                      Please Enter a character:&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;input type = "text"     id = "character"&gt; 
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;button onclick = "Display()"&gt;Display&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
      &lt;div id="output" style = "background-color:blue;"&gt;&lt;script&gt;
       document.getElementById("output").innerHTML(outputText);
      &lt;/script&gt;&lt;/div&gt;
  
   &lt;/table&gt;
      &lt;/body&gt;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
  &lt;/html&gt;
  </code></pre>
  
  <p>Any useful tips will be appreciated and please consider the fact that I am still new to web development so my code is obviously very basic. Please let me know if you require anything more of me. </p>