Loading .js file in <head>

Question

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>

You were almost there :) Welcome to the world of programming, it's a blast! — Gad
– Gad, Commented Jun 1, 2014 at 7:05

JJJ · Accepted Answer · 2014-06-01 07:01:34Z

3

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);
};

answered Jun 1, 2014 at 7:01

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Paul Over a year ago

I would add that onclick is not setting the click handler for the textarea, but is setting the click handler window.onclick for the entire window. This is because global variables, those without the var keyword, are setting properties of window.

user2386986 Over a year ago

Oh, OK, so you mean in the first case I am not returning a "function as an object" whereas in the second case the returned value is a function? That helps a lot, thanks!

JJJ Over a year ago

@Paul That's true, but I wasn't sure if that was the intention or not.

user2386986 Over a year ago

Then my question would be, if I want to wrap it to an external .js file, how should I be able to pass values to the function?

JJJ Over a year ago

I don't quite understand what you mean. You're already passing the value of document.getElementById("a").value to the function.

|

Sacho · Accepted Answer · 2014-06-01 07:05:33Z

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.

Collectives™ on Stack Overflow

Loading .js file in <head>

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related