0

我有一个 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 最好放在底部）来缓解这种情况的最佳方法是什么？谢谢您的帮助！

4

3 回答 3

2

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

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

（在声明 c 之后）

于 2013-04-12T19:34:58.973 回答
1

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

  1. 从全局范围中删除 var "c"。应该非常小心地使用这个范围。想象一下，如果另一个 javascript 文件也使用此范围声明了一个名为“c”的 var（对他们感到羞耻）。它会被你覆盖。

  2. 删除直接在输入上声明的“onClick”属性。

  3. 由于您使用的是 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 一样将其导入），以便浏览器能够缓存它以加快加载速度。

于 2013-04-12T20:00:29.590 回答
-1

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

只需将您的 JavaScript 更改为显式声明c为全局变量，如下所示：

window.c = {
    ...
};

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

于 2013-04-12T19:34:57.210 回答