A web page of a web application was showing a strange error. I regressively removed all the HTML/CSS/JS code and arrived to the basic and simple code below.
<
Just to complete the answers from David and Daniel, this behavior is not documented at all, but it work like the following in almost every modern browser:
The content of an inline event handler becomes the FunctionBody
of a function that the browser calls when it fires that event.
The scope chain of this function is augmeted with the element, the element's FORM
(if it exits and is a FORM
element), and document
itself.
It looks something like this in code:
function onclick(event) {
with(document) {
with(this.form) {
with(this) {
// inline event handler content...
}
}
}
}
This behavior can cause all sort of name conflicts due the augmentation of the scope chain you cannot be 100% sure about what you are referring, it could be an attribute of the element itself, an attribute of the element's form, an attribute of the document
object or any global variable.
Recommended article: