我有一个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为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放在页面底部)?谢谢您的帮助!

最佳答案

我将对您的代码进行以下更改:


从全局范围中删除var“ c”。这个范围应该非常小心地使用。试想一下,如果另一个JavaScript文件也使用此作用域声明了一个名为“ c”的变量(对其感到羞耻)。它会被您覆盖。
删除直接在输入中声明的“ onClick”属性。
由于您使用的是jQuery,因此可以在“就绪”方法中声明代码(该方法在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一样导入它),以便浏览器能够对其进行缓存以加快加载速度。

07-24 09:44
查看更多