How to run this code externally?

Question

The Javascript code is embedded in the HTML but want to do a link externally to the JS script instead of having it inside the HTML but I would end up with some global or local variable problems where a function is ran before it is defined

any help with this problem?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
  <title>JavaScript label example</title>
  <style>
    p {
      font-family: 'helvetica neue', helvetica, sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-align: center;
      border: 2px solid rgba(0,0,200,0.6);
      background: rgba(0,0,200,0.3);
      color: rgba(0,0,200,0.6);
      box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
      border-radius: 10px;
      padding: 3px 10px;
      display: inline-block;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>Player 1: Chris</p>
</body>
<script>
var para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}
</script>

</html>

I'm guessing I would have put <script src="js/script.js"></script> at the bottom of the html page?

if not I get the error

'updateName' was used before it was defined. para.addEventListener('click', updateName);

'prompt' was used before it was defined. var name = prompt('Enter a new name');

Please copy and paste your code in the question instead of posting a screenshot. — dokgu, Feb 10 '17 at 21:35
I don't understand. What makes you think you'd have any problems by putting it in an external script? As long as you load them in the same order, it's **exactly** the same as if you wrote it in the HTML. — Mike Cluck, Feb 10 '17 at 21:36
Possible duplicate of [Javascript that executes after page load](http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — Heretic Monkey, Feb 10 '17 at 21:36
Like @MikeC mentioned - you shouldn't have any problems if you relocate your script to an external file. Just link to the external file in the same place where the original script was located. Could you also include in your question the code that was giving errors on the variables? — dokgu, Feb 10 '17 at 21:39
The "errors" you quote are (a) Warnings, not errors (b) The output of JSLint or a similar tool, and (c) Nothing to do with the HTML at all. — Quentin, Feb 10 '17 at 21:41

score 4 · Answer 1 · answered Feb 10 '17 at 21:43

4

'updateName' was used before it was defined. para.addEventListener('click', updateName);

Your code:

para.addEventListener('click', updateName);
function updateName() {

You use it on the line before you define it.

Hoisting means this doesn't have any practical effect, but your linting tool considers it bad style.

'prompt' was used before it was defined. var name = prompt('Enter a new name');

prompt is a web API. It isn't part of JavaScript itself. Your linting tool isn't configured to expect the JavaScript to run in a browser. You need to reconfigure it.

answered Feb 10 '17 at 21:43

Quentin

914,110
126
1,211
1,335

You said *'updateName' was used before it was defined* , but I tested this and it has no problem. – Farzin Kanzi Feb 10 '17 at 21:50
@FarzinKanzi Function declarations are [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) into memory before the code is executed, which means that from a practical perspective it doesn't matter where the function is declared. – csm Feb 10 '17 at 21:55
1

@csm, if i truly understand you, i said what you say. *it doesn't matter where the function is declared.* – Farzin Kanzi Feb 10 '17 at 22:04
@FarzinKanzi That's right! Looks like I misunderstood you. – csm Feb 10 '17 at 22:06

score 1 · Accepted Answer · answered Feb 10 '17 at 21:42

1

By default script tags are evaluated in the order that they appear in the source code. Replacing your script tag with one that loads the same code from an external file should be equivalent.

If you want to reference the script in head instead, use the defer attribute.

answered Feb 10 '17 at 21:42

csm

708
7
16

does it have to be in the same location when replacing the script tag with an external one? I'm use to putting script tags at the top level of the HTML page – Shire Feb 10 '17 at 21:44
1

@Shire — The position of a ` – Quentin Feb 10 '17 at 21:45
@Shire By default yes. The `script` tag is evaluated as soon as it is encountered. Without the `defer` attribute, the script will execute before the DOM has loaded. – csm Feb 10 '17 at 21:46
@Quentin, Thanks Quentin you answered my question! not sure how to choose that comment you made as the answer for this thread – Shire Feb 10 '17 at 21:50
@Shire — It's a comment because it (and cms's answer) has nothing to do with what your question is actually appears to be asking about. The warnings you quoted are not the error message from the question I linked to in my comment. – Quentin Feb 11 '17 at 08:43
That's true. When I answered the question the actual warning messages weren't included in the post yet and I was under the impression that Shire was worried about the loading order of scripts. – csm Feb 11 '17 at 09:19

How to run this code externally?

2 Answers2