尝试在表单提交时执行功能时遇到一些问题。我需要为输入添加一个最小值/最大值。
没有代码的代码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
它将输入的背景更改为红色(如果错误)和绿色(如果正确),该函数就可以工作。如果将其包装为函数运行的形式,则可以看到它短暂运行了一段时间,然后将所有功能重置。
发生的事情是您实际上正在提交表单。由于表单没有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();
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句