HTML and JavaScript in separate files - newbie alert

Question

OK. I feel dumb! I've been trying to do something very simple and yet finding it very difficult to do or to find. All I want to do is:

have the index.html file display.
I want a separate JavaScript file that contains all of my JavaScript code. Completely separated, so I don't have any JavaScript code in my HTML file. I don't want a click event or anything fancy.
I just want the page to display Hello World! onLoad by getting it from a JavaScript function.

BTW: Seems all tutorials either put the JavaScript code in with the HTML or they want to show you how to do something fancy. I've been all over SO to no avail.

The closest I've gotten is listed below. I give up! A little help would be so appreciated.

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="script.js"></script>
    </head>
    <body>
        <script type="text/javascript"></script>
    </body>
</html>

script.js:

window.onload = function() {
   var result="Hello World!";
   return result;
};

In what directory are the index.html and script.js file saved? — stackErr, Feb 19 '16 at 21:18

maioman · Answer 1 · 2016-02-19T21:25:39.880

3

if you want to append to body, you can create a text node ( createTextNode() ) and then directly append that to body:

    window.onload = function() {
      var result = document.createTextNode("Hello World!");
      document.querySelector('body').appendChild(result);
    };

edited Feb 19 '16 at 21:25

answered Feb 19 '16 at 21:22

maioman

15,071
4
30
42

the issue is about appending a childNode, it will work from external file just as well – maioman Feb 19 '16 at 21:26

Zlatko · Answer 2 · 2016-02-19T22:05:57.393

2

If you want to grab a hold of a place where to put your file, you need to address it.

Eg.

<body>
  <div id="place-for-text"></div>
</body>

And then in your script:

var elem = document.getElementById('place-for-text');
elem.innerHTML = 'Hello world.';

That is about the simplest way to do it in a way you could control some of it.

You could go more fancy and add a DOM element instead:

var elem = document.getElementById('place-for-text');
var text = document.createTextNode('Hello world');
elem.appendChild(text);

edited Feb 19 '16 at 22:05

answered Feb 19 '16 at 21:19

Zlatko

16,414
12
60
116

OP said" Completely separated, so I don't have any JavaScript code in my HTML file. I don't want a click event or anything fancy.", `
`
– Billy Feb 19 '16 at 22:01
Yep, you're right, I should take out that last edit. – Zlatko Feb 19 '16 at 22:05

score 2 · Answer 3 · answered Feb 19 '16 at 21:20

What you can do is print the text you want to the <body> element when the page loads. Something like this should do the trick:

window.onload = function() {
   var result="Hello World!";
   document.querySelector('body').innerHTML(result);
};

Or if you had a particular place on your webpage that you wanted to load this text into, you can create an element in your HTML, give it a unique id and reference it in your JavaScript:

<body>
    ...
    <div id="myAwesomeElement"></div>
    ...
</body>

and in the JavaScript:

window.onload = function() {
   var result="Hello World!";
   document.querySelector('#myAwesomeElement').innerHTML(result);
};

score 2 · Answer 4 · answered Feb 19 '16 at 21:21

In your javascript function, you can do something like this:

document.getElementById("divID").innerHTML="Hello World!";

and in your html file create a div or span or something that you want modify(in this case, the inner html content):

<body>
    <div id="divID"></div>
</body>

When the function is called, it will find the dom element with the Id of "divID", and the innerHTML will be what you assign the Hello World to. You could modify other properties like css style stuff too.

score 1 · Answer 5 · answered Feb 19 '16 at 21:24

There are multiple ways to ways to solve your problem. The first way only changes your javascript. It uses the document.write() function to write the text to the document. Here is the new javascript:

window.onload = function() {
   document.write("Hello World!");
};

The second way also only changes your javascript. It uses the document.createElement() function to create a p tag and then changes the content inside it then appends it to the body. Here is the new javascript:

window.onload = function() {
    var p=document.createElement("p");
    p.innerHTML="Hello World!";
    document.body.appendChild(p);
};

score 1 · Accepted Answer · edited May 23 '17 at 12:00

Here's a way that hasn't been shown yet. You can remove the script tag from the head of the file since we want the js file to load up after the rest of the page. Add the script tag with the script.js source to the body.

//index.html
<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
    <script src="script.js"></script>
</body>
</html>

The script.js file looks like this:

//script. js file
    !function () { document.querySelector("body").innerHTML = "hello world"; } ();

The exclamation point and the following () causes the function to run automatically upon load. For more info take a look at this question: What does the exclamation mark do before the function?

EDIT

I should also point out that document.write and .innerHTML are not considered best practice. The simplest reasons are that document.write will rewrite the page and .innerHTML causes the DOM to be parsed again(performance takes a hit) - obviously with this example it doesn't really matter since it's a simple hello world page.

An alternative to document.write and .innerHTML

 !function () { 
 var text = document.createTextNode("Hello World");
 document.querySelector("body").appendChild(text); 
 } ();

It's a bit of a pain, but you can write a function for the process and it's no big deal! The good news is that, with the new ecmascript 6(new JavaScript) you can turn this into a quickly written arrow function like the following:

//script.js
! function() {
   var addTextNode = (ele, text) => { //create function addTextNode with 2 arguments
     document.querySelector(`${ele}`).appendChild(document.createTextNode(`${text}`));
// ^ Tell the function to add a text node to the specified dom element.
 }
 addTextNode("body", "Hello World");
}();

Here's a JS Fiddle that also shows you how to append to other elements using the same function.

Hope this helps!

score 0 · Answer 7 · answered Feb 19 '16 at 21:18

0

window.onload = function() { document.write('Hello World') };

Returning from window.onload doesn't do anything productive. You need to call methods on the document to manipulate the page.

answered Feb 19 '16 at 21:18

Raphael Serota

1,804
8
15

Although document.write DOES work, it's frowned upon http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – zfrisch Feb 19 '16 at 21:43
I think all the answers to this question are bad practices in larger applications, especially document.write, but the OP seems to want the simplest possible way to make his javascript interact with the DOM. – Raphael Serota Feb 19 '16 at 22:54

HTML and JavaScript in separate files - newbie alert

7 Answers7