Question

我还有另一个关于这个项目的问题，但是这里希望从中学到很多东西。

所以我创建了一个函数，它在div中创建一个div（然后它将包含一个来自骰子卷的随机数），当我将这个函数添加到按钮点击时它就可以工作。

但是多次点击按钮可能不适合很多骰子，所以我创建了一个表单并且它不应该创建用户决定他想要的div数量，但它似乎不起作用。我怀疑它与刷新页面的表单有关，因此我使用内联“onsumbit”而不是处理偶数with addEventListener并尝试返回函数，但它似乎仍然无法正常工作。我究竟做错了什么？这是HTML和JS位：

    <form>
    <p>Pick how many dice you want to roll:</p>
    <input id="diceNumber" type="number" name="diceNumber" onsubmit="return addMoreDice()">
</form>

<button onclick="addDice()">Add Dice</button>

<div id="diceTable">

</div>

和JS：

var numInput = document.querySelector("input");

function addDice(){
var div = document.createElement('div');

div.className = "diceStyle";

div.innerHTML = "<p> here will be a dice</p>";

document.getElementById('diceTable').appendChild(div);
};

function addMoreDice(){
for(var i = 0; i < numInput; i++){
    addDice();
    }
}

Answer 1

1.您应该在表单标记中包含onsubmit（）并在表单中添加一个提交按钮。

只要输入框中的值发生更改，您就可以使用onchange（）方法调用addMoreDice（）

Answer 2

你需要在侧面标签中添加onsubmit =“yourfunction（）” 然后将输入类型提交到表单标签中，如

application/json

Answer 3

每次提交表单时，都会转到另一个页面。相反，你可以使用如下所示的代码，（删除表单标签）

<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber"></input>
<input type="submit" onClick="addMoreDice()">

输入输入后单击“提交”会根据需要动态创建分部。

单击按钮时功能有效，但提交表单时无效

3 个答案: