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.
click() is the inbuilt of javascript's button object.
click() a reserved name for a method used in HTML5 http://www.w3.org/TR/html5/webappapis.html
click is predefined event. You should not use predefined events.
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>
Related
This question already has answers here:
Is "remove" a reserved keyword in Google Chrome?
(3 answers)
Closed 8 years ago.
Can anyone explain why this piece of code will remove the buton after click in FF and Chrome? IE will show an alert.
<html>
<head>
<script>
function remove()
{
alert('test');
}
</script>
</head>
<body>
<input type="button" onclick="remove();" value="Remove"/>
</body>
</html>
Because javascript has a remove method. Name your function abcd and it is fine:
<html>
<head>
<script>
function abcd()
{
alert('test');
}
</script>
</head>
<body>
<input type="button" onclick="abcd();" value="Remove"/>
</body>
</html>
Don't use inline event handlers or at least know what you are doing.
The problem is that the properties of the element itself are in the scope of the inline event handler, and DOM nodes have a remove method *****. So remove() is equivalent to this.remove(), i.e. it calls the remove method of the button.
Solutions:
Rename your function
Use a different way to bind event handlers
*: This is a relatively new API which is not supported by IE yet, so it works fine in IE.
using inline event handlers is usually considered bad practice, as you are asking the browser to parse javascript events from html strings, a much better way would be as follows:
<html>
<head>
<script>
window.addEventListener("load",function(){
window.myButton = document.getElementById("myButton");
window.myButton.addEventListener("click",myButtonFunction);
});
function myButtonFunction()
{
alert('test');
}
</script>
</head>
<body>
<input id="myButton" type="button" value="Remove"/>
</body>
</html>
also you don't need to declare it as a window variable (global), unless you want to access it in your function. (but could also access it again via document.getElementById("myButton")
So I am new to javascript (in fact, new to programming in general).
My question is, can I consider loading the .js file in the
<head><script src="script.js"></script>...</head>
as loading a header file (like in c/c++)?
I guess not. Suppose my script.js looks like this:
function copyToClipboard(text)
{window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}
and my index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script> onclick=copyToClipboard(document.getElementById("a").value);
</script>
</body>
</html>
It does not work, namely, it does not wait for my clicking (which means that the function is loaded correctly-it is called successfully, it is just that the pop-up does not wait for the mouse event). But if I put the script in-line, it works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script>onclick=function copyToClipboard(text) {
window.prompt("Copy to clipboard:Ctrl+C,Enter",document.getElementById("a").value);
}
</script>
</body>
</html>
The reason why the first code doesn't work is that you're calling the copyToClipboard() function and assigning the return value to the onclick variable. In the second code you're correctly assigning it a function reference instead of calling the function immediately.
In other words:
onclick = copyToClipboard(document.getElementById("a").value);
"Call copyToClipboard(), assign return value (undefined) to the onclick variable"
onclick = function copyToClipboard(text) { ...
"Assign a reference to a function called copyToClipboard() to the onclick variable"
To make it work with the function definition in an external script, wrap the function call in an anonymous function:
onclick = function() {
copyToClipboard(document.getElementById("a").value);
};
All praise the power of javascript to mislead developers into diagnosing their problems incorrectly!
This is not how you define an inline onclick handler. An inline onclick handler is an attribute(or property, as we'll find out in a bit) of an html element:
<textarea id="a" autofocus="true" onclick="copyToClipboard(this.textContent)"></textarea>
What you did with the <script> tag was simply include some javascript code, to be executed as the browser is parsing your html:
<script> onclick=copyToClipboard(document.getElementById("a").value);</script> calls your function, and assigns its return value to onclick.
But wait, why does your second snippet work?
This is because onclick is also a property of dom elements. It also happens that you can assign a click handler to window itself - this is what your second snippet is actually doing(thanks to an uncool feature of javascript that attempts to assign to an undefined variable assigns to properties of the global object). That means that no matter where you click, your new click handler will be called.
As to your opening question, you can't really say that tags are like includes - a script can involve more than just declarations and definitions, unlike an included file. You can look into some of the module standards/frameworks, like RequireJS, for more similar functionality.
I'm a noob in JQuery, trying my hands on the basic functionality of it
I have a html, like below.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/start.js"></script>
<script>
$(mainFunction());
$('#label1').prop('innerHTML', "test");
</script>
<title></title>
</head>
<body>
<label id="label1"></label>
</body>
</html>
From start.js, i'm trying to manipulate the elements in this html file like below.
function start(name){
this.iam = name;
this.getName = function(user){
return this.iam;
}
}
function mainFunction(){
var label = $('#label1');
var oStart = new start("test");
label.prop("innerHTML" ,oStart.getName("test"));
}
When I try to lookup whats in the 'label' in the above code, i get [] printed on the console. What am I doing wrong here?
$(mainFunction()); is your issue. Instead provide function reference to document.ready.
Like this:
$(mainFunction);
While doing $(mainFunction()); you are invoking the function mainFunction while setting up the handler, which means it gets executed too early before the DOM tree has been constructed.
Or in order to avoid confusion you could do:
$(function(){
mainFunction();
});
Also remember that this issue will not happen if you move your script just before the end of the body tag. You do not have to listen to document ready handler. Plus as a shorthand you could just do label.html(oStart.getName("test"));
You need to wait for the DOM to be ready before using jQuery.
This is done this way:
$(document).ready(function() {
// All your code touching the DOM in here
});
Also note that this line: $(mainFunction()); uses the return value of mainFunction, it does not trigger it when DOM is ready.
I wrote a web application with a body onload event. I know this isn't optimal so I want to use DOMContentLoaded to trigger my init event.
I have a strange problem, I can't access my DOM element and I don't know why :/.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="test">Hello World</div>
</body>
</html>
JS:
// add event listener
document.addEventListener('DOMContentLoaded', init, false);
function init () {
// pop up
alert(document.getElementById(test).innerHTML);
}
Does somebody see the problem?
You are passing the undefined variable test to the getElementById() function, instead of the string value 'test'.
So
document.getElementById(test); // Incorrect - as an undefined varible
Should in fact be
document.getElementById('test') // Correct - as a string value
Or
var element_id = 'test';
document.getElementById(element_id) // Correct - as a defined variable
Add double quotes around test i.e. "test"
document.addEventListener('DOMContentLoaded', init, false);
function init () {
// pop up
alert(document.getElementById("test").innerHTML);
}
If your init function is executed, then you might add quote arroud your id :
document.getElementById(test)
becomes
document.getElementById('test')
I have a JS script which created a new Node and inserts it to the HTML page. I am handling DOM mutation events and can capture DOMNodeInserted event. Inside that function I want to find out the source (i.e. in which part of the HTML has the script function been called) and the target (i.e. in which part the node is being added in the HTML page).
I am able to find the target using event.target, but I am not able to find the source of the event.
For example, consider the following pseudocode HTML page:
<html>
<head>
<script>
function test() {
//DOM access
<div_object>.setAttribute("attr", "value");
}
</script>
</head>
<body onload="test()">
<div id="123">
</div>
</body>
</html>
I want my source to be BODY (because that is were the script is initiated), target should be div(123) (because the attribute is added to div_123.
How can I do this?
Sorry, you can't find out what piece of code caused an event to be triggered, they're completely decoupled. You would have to have the triggering code co-operate by storing the values of its own this/event.target in a variable for the triggered code to pick up later.
But then if you have co-operation like that, you wouldn't need DOM Mutation Events.
If you have an event handling layer (as is part of many JS frameworks), you could put the this/target tracking in that layer, so the triggered code could ask “what was the last event that fired, before me?”.
But I'm not convinced this would be worth it. It's usually best to add your own co-operative hooks that communicate between components; you can't generally rely on DOM Mutation Events since they're not globally and completely supported (or indeed supported at all on IE<9).
What about
<html>
<head>
<script>
function test(element) {
//DOM access
element.setAttribute("attr", "value");
}
</script>
</head>
<body onload="test(this)">
<div id="123">
</div>
</body>
</html>
?
Interesting. I had a look here (answered to get formatting)
<html>
<head>
<script>
function test(e) {
if (e) var event=e;
//DOM access
var t="";
for (o in event) t+='<br/>'+o+':'+event[o]
document.getElementById('d123').innerHTML=t;
}
</script>
</head>
<body onload="test(event)">
<div id="d123">
</div>
</body>
</html>