为什么我的乘法表没有显示？答案

【问题标题】：Why my Multiplication Table is not showing?为什么我的乘法表没有显示？
【发布时间】：2016-03-12 10:42:57
【问题描述】：

我无法弄清楚我的 onsubmit 事件有什么问题：当我按下提交时 - 什么也没有发生。当我将 cols 和 rows 直接放在函数 show table 中时，它可以工作。这是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>

【问题讨论】：

标签： javascript dom-events

【解决方案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;
}

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

在您的 sn-p 中，“显示”是一个按钮，而不是一个表单。所以你需要使用“onclick”而不是“onsubmit”。

【讨论】：

【解决方案3】：

问题在于输入的类型，它必须是“按钮”而不是“提交”！

【讨论】：