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

Question

我无法弄清楚我的onsubmit事件出了什么问题：当我按Submit时-没什么事。 当我将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> 

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

在您的代码段中，“显示”是按钮，而不是表单。 因此，您需要使用“ onclick”而不是“ onsubmit”。

Answer 3

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