How to pass variables through the same page to javascript a page reload? -

say want have text box in html code user enters height , width of map. , want javascript code processes passed variables , generate map based on values.

here problem. don't want use clunky prompt() function, it's annoying, , limited. if use form tag, , put submit button going refresh page, , don't want that, i'm not submitting anything, passing variables script.

because going done javascript, , nothing going send server or sort of database, want done on same page without reload or refresh , results shown after user clicks on button.

how can this?

<script> function validateinput() { // check if values numbers if not generate error , return false value } function getmapsize () { // user input data , return array }  function generatemap () { var map = []; map = getmapsize(); // generate map , show result on current page } if (variables set , numbers) { generatemap(); } </script> height:<input id="mapsize" name="mapheight" type="text"></input> width:<input id="mapsize" name="mapwidth" type="text"></input> 

like niels said, can use <button onclick="getmapsize()" >generate map</button>
btw, sure keep id's of input elements unique. can userinput this:

<script>  function getmapsize() {     var height = document.getelementbyid('mapheight').value;     var width = document.getelementbyid('mapwidth').value;      if (validateinput(height) == true && validateinput(width) == true) {         generatemap(height, width);     } }  function validateinput(input) {     // validate input...      if (isvalid) {         return true;     } else {         return false;     } }  function generatemap(height, width) {     // generate map given height , width }  </script>