在javascript中的window.onload中单击onclick
[英]onclick in window.onload in javascript
问题描述
Consider the snippet: 
考虑一下片段：
<head>
<script>
window.onload = function(){
function callMe(){
alert("Inside the function");
this.value = "New Value";
}
document.getElementById("thisCall").onclick = callMe;
}
</script>
</head>
<body>
<input type="submit" id="thisCall" />
</body>
The above works fine as expected and the button text is changed from Submit to New Value. 以上工作正常，按钮文本从提交更改为新值。
But why doesn't the below snippet works if I do a slight modification? 但是，如果我稍作修改，为什么下面的代码段不起作用？
<script>
window.onload = function(){
function callMe(){
alert("Inside the function");
this.value = "New Value";
}
//document.getElementById("thisCall").onclick = callMe;
}
</script>
</head>
<body>
<input type="submit" id="thisCall" onclick="callMe();"/>
</body>
and I don't understand why 而且我不明白为什么
Uncaught ReferenceError: callMe is not defined
is the o/p at the console? 是控制台的o / p？
3 个解决方案
解决方案1
4 已采纳 2015-09-02 16:33:37
A function declaration creates a variable pointing to the function in the current scope . 函数声明创建一个指向当前作用域中函数的变量。
In JavaScript, each function creates a new scope. 在JavaScript中，每个函数都会创建一个新范围。
You are creating callMe inside the scope of the anonymous function you assign to onload . 您正在为分配给onload的匿名函数的范围内创建callMe 。 It is not a global. 它不是一个全球性的。
The onclick event handler is not in the scope of the aforementioned anonymous function, so the variable is not accessible. onclick事件处理程序不在上述匿名函数的范围内，因此无法访问该变量。
解决方案2
3 2015-09-02 16:35:33
Your problem is that the callMe() function declaration is inside the onload scope so it's local to it and it's only visible inside this scope. 你的问题是callMe()函数声明在onload作用域内，所以它是本地的，它只在这个作用域内可见。
You have to put it outside so it will be a global function and can be visible outside and accessible from outside: 你必须将它放在外面，这样它才能成为一个全局功能，可以在外面看到，也可以从外面访问：
function callMe(){
alert("Inside the function");
this.value = "New Value";
}
window.onload = function(){
callMe();
document.getElementById("thisCall").onclick = callMe;
}
EDIT: 编辑：
And this code : 这段代码：
document.getElementById("thisCall").onclick = callMe;
Is working because it's written inside the onload function scope, where the function callMe is defined. 正在工作，因为它是在onload函数范围内编写的，其中定义了函数callMe 。
And it will not work if you use it with the onclick attribute, because like said callMe() isn't recognized in the global scope and that's the reason why you got callMe is not defined there. 如果你将它与onclick属性一起使用它将无法工作，因为就像所说的callMe()在全局范围内无法识别，这就是你callMe is not defined在那里callMe is not defined的原因。
解决方案3
2 2015-09-02 16:33:36
This is due to scope. 这是由于范围。 Your function only exists within the scope of the anonymous function assigned to the window.onload method. 您的函数仅存在于分配给window.onload方法的匿名函数的范围内。 That anonymous method is aware of the method since it's defined in its scope and can invoke it but nothing outside of that scope can. 该匿名方法知道该方法，因为它在其范围内定义并且可以调用它，但该范围之外的任何内容都不能。
Does that make sense? 那有意义吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.