javascript - 为什么我的九九乘法表没有显示？

Question

我无法弄清楚我的 onsubmit 事件出了什么问题:当我按“提交”时 - 什么也没有发生。当我将列和行直接放入函数显示表中时，它可以工作。这是 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

如果你想使用onsubmit事件，你必须有一个表单，所以在你的html中添加一个表单标签，覆盖所有的输入。

<form id="form">
    <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>

将 onsubmit 事件的 ID 更改为表单的 ID，并将 return false 添加到 onsubmit 中的代码末尾>，像这样:

document.getElementById("form").onsubmit = function() {
    // ......
    // your code above

    return false;
}

这将阻止您单击提交按钮后页面刷新。

希望有帮助。