title: How to pass variables through the same page to javascript a page reload?
body: <p>Say I want to have a text box in my html code that the user enters height and width of a map.
  and I want my javascript code to processes the passed variables and generate a map based on the values.</p>
  
  <p>Here is my problem. I don't want to use the clunky prompt() function, it's really annoying, and is very limited.
  If I use the form tag, and put a submit button it is going to refresh the page, and I don't want that, but I'm not submitting anything, only passing variables to my script.</p>
  
  <p>because everything is going to be done by javascript, and nothing is going to be send to a server or any sort of database, I want everything to be done on the same page without any reload or refresh and the results to be shown immediately after user clicks on a button.</p>
  
  <p>How can I do this?</p>
  
  <pre><code>&lt;script&gt;
  function validateInput() {
  // check if the values are numbers if not generate an error and return a false value
  }
  function getMapSize () {
  // get the user input data and return it as an array
  }
  
  function generateMap () {
  var map = [];
  map = getMapSize();
  // generate the map and show the result on current page
  }
  if (variables are set and they are numbers) {
  generateMap();
  }
  &lt;/script&gt;
  Height:&lt;input id="mapSize" name="mapHeight" type="text"&gt;&lt;/input&gt;
  Width:&lt;input id="mapSize" name="mapWidth" type="text"&gt;&lt;/input&gt;
  </code></pre>