Question

我的桌面有我的javascript的另一个问题。基本上，如果你查看我发布的链接，我有三个带有复选标记和红色的单元格。当我单击单元格时，将删除复选标记并且单元格会更改颜色。我想让我的重置按钮将表恢复到其初始状态。但是，这需要两次点击。您可以在此处的链接上对此进行测试：http://cs1.ucc.ie/~od1/project_css/

查看源代码是最好的，但这里是我的javascript代码，不允许它工作：

        function resetColour(objName){
            var arr = document.getElementsByName(objName);
            var arrLen = arr.length;

            for(var i = 0; i < arrLen; i++){
                if(arr[i].checked){
                    arr[i].parentNode.style.backgroundColor = "#F26C4F";
                }
                else{
                    arr[i].parentNode.style.backgroundColor = "#FAF4E3";
                }
            } 
        }

有什么方法可以让表单重置并通过一次点击更改颜色？

Answer 1

问题是onclick事件处理程序在执行浏览器执行的操作之前触发了（因此您可以return false取消事件;通常很有用。不是onafterclick事件，但有另一种选择。

使用重置按钮而不是让逻辑更改表格单元格的颜色，而是使用onchange事件将其放在复选框本身上。

您可以使用for循环以编程方式注册它们，并在更改值后将该回调称为。

Answer 2

这是因为它在实际重置发生之前调用了该函数。您可以做的最简单（但最差）的方法是等待几毫秒来调用您的函数。

<input type="reset" name="reset" value="Reset" onclick="setTimeout('resetColour(\'free\')',200)" class="button">

修改更好的选择是使用普通按钮而不是重置按钮并先调用函数然后调用form.reset

<input type="button" value="Reset Form" onClick="resetColour('free')';this.form.reset()" />

Answer 3

这是我怎么做的。

使用常规按钮

<input type="button" value="Reset Form" onClick="resetColour('free')" />

然后

 function resetColour(objName){
        var arr = document.getElementsByName(objName);
        var arrLen = arr.length;

        for(var i = 0; i < arrLen; i++){
            var checkbox = arr[i]; 
            if( checkbox.hasAttribute('checked') ){
                checkbox.checked = true; 
                checkbox.parentNode.style.backgroundColor = "#F26C4F";
            }
            else{
                checkbox.parentNode.style.backgroundColor = "#FAF4E3";
            }
        } 
    }

Answer 4

我认为将setTimeout或return false放在onclick上是错误的做法。

相反，我会使用onreset的{{1}}事件。

一个非常简单的例子如下：

form

虽然是一个稍微高级的主题。我会通过使你挂钩<!DOCTYPE html> <html> <head> <title>sfs</title> <style type="text/css"> form { width: 400px; height: 400px; border: solid black 1px; } </style> <script language="javascript" type="text/javascript"> function hello( form ) { form.style.backgroundColor = "#F26C4F"; } </script> </head> <body> <form onreset="hello(this)"> <input type="input" value="blah" /> <input type="reset" value="Reset" /> </form> </body> </html>事件的函数不再内联来改进它：

onreset

另外，值得注意的是，当<!DOCTYPE html> <html> <head> <title>sfs</title> <style type="text/css"> form { width: 400px; height: 400px; border: solid black 1px; } </style> <script language="javascript" type="text/javascript"> window.onload = function() { document.forms["myForm"].onreset = function() { this.style.backgroundColor = "#F26C4F"; } } </script> </head> <body> <form name="myForm"> <input type="input" value="blah" /> <input type="reset" value="Reset" /> </form> </body> </html>事件被触发时，表单的状态就在字段被重置为默认值之前。因此，如果您需要在重置之前对现有值执行某些操作，那么这应该是一个非问题。

Answer 5

我建议您使用jQuery并执行人工点击，如下所示：

$('#formSubmitButtonIDHere').trigger('click');

除非点击两次，否则Javascript onClick不会执行

5 个答案: