Javascript HTML输入元素没有方法'；是有效的'；

我有一个javascript类

c

，我试图在输入提交按钮的

onClick

事件上调用它的方法

isValid（）

。我当前在提交按钮下方的一组脚本标记中有

c

。当我点击提交按钮时，我得到

未捕获类型错误：对象没有方法“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>

下面是页面的外观：

<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={
容器：$（'c#u#c'），
r1:0，
r2:0，
c_i:“，
createCaptcha:function（）{
var-newHtml；
this.r1=this.randomNumber（10）；
this.r2=this.randomNumber（10）；
//警报（this.r1+this.r2）；
newHtml+=“什么是“+this.r1+”加上“+this.r2+”？
”；
this.container.html（newHtml）；
},
isValid:function（）{
//警报（此为.r1）；
this.c_i=$（'input[name=“c”]”）；
如果（this.r1+this.r2==this.c_i.val（））{
警惕（“正确！”）；
返回true；
}否则{
警报（'error=['）；
返回false；
}
},
随机数：函数（max）{return Math.floor（Math.random（）*（max+1））；}
}
c、 createCaptcha（）；

显然，调用尚未定义的

c

对象的方法似乎不允许该方法运行，这是有道理的

---

在不必将脚本移动到页面顶部的情况下（就性能而言，js最好放在页面底部），解决此问题的最佳方法是什么？感谢您的帮助！

您的

输入
元素正在尝试访问全局变量
c

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

window.c = {
    ...
};

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

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

（声明c后）
我将对您的代码进行以下更改：

从全局作用域中删除var“c”。应该非常小心地使用此作用域。想象一下，如果另一个javascript文件也使用此作用域声明了一个名为“c”的var（真丢脸）。它会被您覆盖

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

因为您使用的是jQuery，所以可以在“ready”方法中声明代码（该方法在加载DOM后立即执行-无论您将脚本放在何处。如下所示：

还考虑将JavaScript代码提取到另一个文件（并像JQuery那样导入它）因此，浏览器将能够缓存它以加快加载速度。
您是否考虑过将javascript移动到js文件而不是嵌入HTML中？底部似乎已经可以工作了，请参见是否有一个HTML元素被分配了id“c”？这会导致DOM尝试对HTML元素执行一个函数是的，很抱歉。我忘了包括这一部分。我将编辑原始问题。@AaronKurtzhals-这会做什么？这与将其嵌入HTML中是一样的。我通常会这样做，但我有另一个函数要直接在c.isValid（）之后运行方法。我想这里的问题是，如果我添加了一个事件监听器，该函数是否会在按钮中的
onClick
事件中定义的内容之前运行？我不知道为什么我刚刚意识到这一点，但我在
c之后一个接一个地将其他函数串联在一起。isValid（）；
方法。谢谢你的帮助！太好了。谢谢你的回答！我选择它是因为它完整地回答了我的问题，并提供了我没有明确要求的最佳范围实践。再次感谢@MarlonBernades！
window.c = {
    ...
};

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



    $(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();
        });

    });