Why my Multiplication Table is not showing?

Question

I can't figure it out what is wrong with my onsubmit event: When I press Submit - nothing is happening. When I put cols and rows directly in function show table it works. Here's a link to codepen http://codepen.io/Y-Taras/pen/VaaBgy

 window.onload = function() {
   document.getElementById("show").onsubmit = function() {
     var cols = document.getElementById("cols").value;
     cols = parseInt(cols);
     var rows = document.getElementById("rows").value;
     rows = parseInt(rows);
     showTable(rows, cols);
     console.log(rows, cols);
   };

   function showTable(rows, cols) {....

 window.onload = function() {
   document.getElementById("show").onsubmit = function() {
     var cols = document.getElementById("cols").value;
     cols = parseInt(cols);
     var rows = document.getElementById("rows").value;
     rows = parseInt(rows);
     showTable(rows, cols);
     console.log(rows, cols);
   };

   function showTable(rows, cols) {
     var elem = "<table>";
     for (var i = 1; i < rows + 1; i++) {
       elem += "<tr>";
       for (var j = 1; j < cols + 1; j++) {
         elem += "<td> " + i * j + "</td>";
         if (j === cols) {
           elem += "</tr>";
         }
       }
     }
     elem += "</table>";
     document.getElementById("table").innerHTML = elem;
   }
 };

<div>
  <h1>javascript</h1>
  <br>
  <p>Multiplication Table</p>
  <hr/>
  <form>
    Number of rows:
    <input type="text" id="rows" name="rows">Number of cols:
    <input type="text" id="cols" name="cols">
    <input id="show" type="submit" value="Submit">
  </form>
</div>
<div id="table"></div>

Answer 1

In your snippet "show" is a button, not a form. So you need to use "onclick" instead of "onsubmit".

Answer 2

The problem was with the type of the input, it's got to be a "button" not "submit"!