Question

我有一个javascript类c，我试图在输入提交按钮的isValid()事件上调用其方法onClick。我目前在提交按钮下面的一组脚本标记中有c。当我点击提交按钮时，我得到了

Uncaught TypeError: Object #<HTMLInputElement> has no method 'isValid'

经过一些麻烦，我尝试在页面底部，类脚本下面放置相同的提交按钮。这允许正确调用该方法。

这是我的javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var c = {
        container : $('#c_c'),
        r1 : 0,
        r2 : 0,
        c_i : "",
        createCaptcha : function(){
            var newHtml;

            this.r1 = this.randomNumber(10);
            this.r2 = this.randomNumber(10);
            // alert(this.r1 + this.r2);

            newHtml += "<p>What is " + this.r1 + " plus " + this.r2 + "?<br/><input type='text' name='c'></p>";

            this.container.html(newHtml);
        },
        isValid : function(){
            // alert(this.r1);
            this.c_i = $('input[name="c"]');
            if (this.r1 + this.r2 == this.c_i.val()) {
                alert('correct!');
                return true;
            } else{
                alert('incorrect =[');
                return false;
            }
        },
        randomNumber : function(max){ return Math.floor(Math.random()*(max+1)); }
    }
    c.createCaptcha();
</script>

这是我的按钮：

<input id="form_0001_ao_submit_input" type="button" name="SUBMIT" value="Submit" style="color:#fff; font-size: 18px; height: 30px; width: 250px; background-color: #00a94f;" onClick="c.isValid();">

我的页面上还有一个带ID的跨度。这是createCaptcha()中引用的内容（抱歉，我错过了这一重要信息= [）：

<span id="c_c"></span>

所以这是页面的样子：

<span id="c_c"></span>
<input id="form_0001_ao_submit_input" type="button" name="SUBMIT" value="Submit" style="color:#fff; font-size: 18px; height: 30px; width: 250px; background-color: #00a94f;" onClick="c.isValid();">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    var c = {
        container : $('#c_c'),
        r1 : 0,
        r2 : 0,
        c_i : "",
        createCaptcha : function(){
            var newHtml;

            this.r1 = this.randomNumber(10);
            this.r2 = this.randomNumber(10);
            // alert(this.r1 + this.r2);

            newHtml += "<p>What is " + this.r1 + " plus " + this.r2 + "?<br/><input type='text' name='c'></p>";

            this.container.html(newHtml);
        },
        isValid : function(){
            // alert(this.r1);
            this.c_i = $('input[name="c"]');
            if (this.r1 + this.r2 == this.c_i.val()) {
                alert('correct!');
                return true;
            } else{
                alert('incorrect =[');
                return false;
            }
        },
        randomNumber : function(max){ return Math.floor(Math.random()*(max+1)); }
    }
    c.createCaptcha();
</script>

看起来好像调用尚未定义的c对象的方法不允许该方法运行，这是有道理的。

什么是最好的方法来缓解这一点，而不必将脚本移动到页面顶部（因为性能明智，js最好放在底部）？谢谢你的帮助！

Answer 1

也许您可以在代码中稍后向输入对象添加事件侦听器。使用JQuery：

$("#form_0001_ao_submit_input").click(function() { c.isValid(); });

（在宣布c之后）

Answer 2

我会对您的代码进行以下更改：

从全局范围中删除var“c”。应该非常仔细地使用此范围。想象一下，如果另一个javascript文件也使用此范围声明了名为“c”的var（对它们感到羞耻）。它会被你覆盖。
删除直接在输入上声明的“onClick”属性。
由于你正在使用jQuery，你可以在“ready”方法中声明你的代码（在加载DOM之后立即执行 - 无论你的位置在哪里。就像这样：



    $(function(){
        //c now is inside a function, so it's not declared on the global scope
        var c = {
           // ... your code
        };  

        //creates the captcha when the DOM is loaded
        c.createCaptcha(); 

        $('#form_0001_ao_submit_input').click(function(){
            c.isValid();
        });

    });

另外考虑将你的javascript代码提取到另一个文件（并像使用jQuery一样导入它），这样浏览器就可以缓存它以加快加载速度。

Answer 3

您的input元素正在尝试访问全局变量c。

只需更改您的JavaScript即可将c显式声明为全局变量：

window.c = {
    ...
};

工作示例：http://jsfiddle.net/ud66S/1/

HTML输入元素没有方法'isValid'

3 个答案: