我有一个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一样导入它),以便浏览器能够对其进行缓存以加快加载速度。