为什么我的乘法 Table 没有显示？

Question

我无法弄清楚我的 onsubmit 事件有什么问题：当我按下提交时 - 没有任何反应。当我将 cols 和 rows 直接放在函数 show table 中时，它起作用了。这是一个 link 到 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，并在 onsubmit 中的代码末尾添加 return false，如下所示：

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

    return false;
}

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

希望对您有所帮助。

Answer 2

在您的代码段中 "show" 是一个按钮，而不是表单。所以你需要使用 "onclick" 而不是 "onsubmit".

Answer 3

问题出在输入的类型上，它必须是 "button" 而不是 "submit"！

为什么我的乘法 Table 没有显示？

Why my Multiplication Table is not showing?

javascript

dom-events