Below is my code and it doesn't work. After I rename the "click()" to "click1()" it works, why?
<html>
<head>
<title></title>
<script type="text/javascript">
function click() {
document.getElementById("content").innerHTML = "abc";
}
</script>
</head>
<body>
<button onclick="click()">try it</button><br />
<div id="content"></div>
</body>
</html>
The string values of "onfoo" handler attributes are interpreted as the bodies of handler functions. In other words, it's as if the string value of the attribute is passed to new Function("event", str) with the result being the handler function used.
Additionally, the lexical scope of the function is established as follows, taken from the HTML5 spec (which I consult only in its capacity of a comprehensive description of browser behavior):
Lexical Environment Scope
* Let Scope be the result of NewObjectEnvironment(the element's Document, the global environment).
* If the element has a form owner, let Scope be the result of NewObjectEnvironment(the element's form owner, Scope).
* Let Scope be the result of NewObjectEnvironment(the element's object, Scope).
Thus it's as if there are up to two nested with blocks implicitly wrapped around the code. Thus in this case the effect is that of calling this:
var handler = new Function("event", "with (this) { click(); }");
Because there's a "click" method on the DOM element corresponding to the <button>, that function is what's called by the handler, not the global one established by the script tag. If the "onclick" attribute is set to "window.click();" then the page works properly.
There's already a function called click, responsible for calling the event handler. By declaring another, you override the first, so the event doesn't work anymore.
See the answer by Pointy for why this happens.
To avoid the issue, there are several options. Since the problem is that a function name will classh with a property name, all revolve around unambiguously referring to the function needed.
.addEventListener() (Recommended)This is the most straight forward and conflict free way to register event handlers using JavaScript.
NOTE: If the <script> tag is in the <headd> section or otherwise before the element that is looked up, then the JavaScript code will execute before the element is in the DOM and thus will not be found. See Why does jQuery or a DOM method such as getElementById not find the element? for more information and ways to avoid that. The two easiest ones are moving the <script> section at the end of the body or using defer (when the <script> tag uses the src attribute).
Here is a solution where the <script> tag is moved:
<html>
<head>
<title></title>
</head>
<body>
<button>try it</button><br />
<div id="content"></div>
<script type="text/javascript">
function click() {
document.getElementById("content").innerHTML = "abc";
}
document.querySelector("button")
.addEventListener("click", () => click());
</script>
</body>
</html>window.yourFunctionThis will unambiguously refer to what is is defined in the global scope:
<html>
<head>
<title></title>
<script type="text/javascript">
function click() {
document.getElementById("content").innerHTML = "abc";
}
</script>
</head>
<body>
<button onclick="window.click()">try it</button><br />
<div id="content"></div>
</body>
</html>One drawback is that there can still be clashes with the same name. This time with something defined in window.
Another drawback is that all other code can also use the global scope, the function might be accidentally overwritten.
Essentially, this solution is only one step removed from the original problem of the name of a function clashing with another name but still vulnerable to the same form of clash.
This will disambiguate the function by making it distinct
<html>
<head>
<title></title>
<script type="text/javascript">
function myClick() {
document.getElementById("content").innerHTML = "abc";
}
</script>
</head>
<body>
<button onclick="myClick()">try it</button><br />
<div id="content"></div>
</body>
</html>The new name can still clash with something. If not with a DOM property, then with something from window. And if not now then perhaps later in the future when:
window
Essentially, this has a chance to merely delay the problem.
click() a reserved name for a method used in HTML5 http://www.w3.org/TR/html5/webappapis.html
You should perhaps consider using jQuery to refactor your code:
<html>
<head>
<title></title>
</head>
<body>
<button id="button1">try it</button><br />
<div id="content"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button1").click(function() {
$("#content").html("abc");
});
});
</script>
</body>
</html>
