javascript - 使用 onsubmit 在 JS 中提交表单

Question

我在提交表单时尝试执行函数时遇到了一些问题。我需要为输入添加最小值/最大值。

没有 onsubmit="runFunction()" 的代码可以正常工作，但是当我将它包装成一个表单并使用 onsubmit="runFunction()" 时函数运行一次，但它会在完成后重置所有内容。

代码如下所示:

HTML:

<form>
    <input class="numGuess" id="num0" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num1" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num2" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num3" min="0" max="9" autocomplete="off">
    <input type="submit" value="Is it correct?" onclick="checkValues()">
</form>

函数 checkValues():

function checkValues(){
  arr2 = [];
  Object.keys(mainGuess).forEach(function(num){
    var iterated = mainGuess[num];
    console.log(iterated.value);
    arr2.push(iterated.value);
  })
  compareArray();
}

compareArray() 只是检查输入值是否与另一个数组相同。

只要我不使用表单并使用 onclick，该函数就可以工作，如果错误则将输入的背景更改为红色，如果正确则更改为绿色。如果我将它包装在函数运行的形式中，我可以看到它在重置所有内容之前短暂运行了一会儿。

Answer 1

实际上，您正在提交表单。由于表单没有 action归因于它，它只是提交给自己，并最终刷新您的页面。您可以通过使用 preventDefault() 防止提交发生来解决此问题

<form>
    <input class="numGuess" id="num0" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num1" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num2" min="0" max="9" autocomplete="off">
    <input class="numGuess" id="num3" min="0" max="9" autocomplete="off">
    <input type="submit" value="Is it correct?" onclick="checkValues(event)">
</form>

然后在你的 Javascript 中

function checkValues(event){
  event.preventDefault();
  arr2 = [];
  Object.keys(mainGuess).forEach(function(num){
    var iterated = mainGuess[num];
    console.log(iterated.value);
    arr2.push(iterated.value);
  })
  compareArray();
}