How to get JavaScript to display in my browser

Question

After extensively studying HTML & CSS, I've just started to learn JavaScript & Python. This is about JavaScript. I'm following a book asking me to start a 'script' tag within a 'div' element which itself is within the 'body' section of a new HTML document. I'm using Notepad++, but I've also tried this on Trinket.io but so far the JavaScript will just not display when I 'run' the document within my browser. The 'script' was at the end of the 'body' section of the document, until I changed it to the end of the 'head' section to see if that would work, but unfortunately it just won't display the results within the browser. I would appreciate any help with this.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>JavaScript No.1</title>
<style>
#container {
 width: 800px;
 height: auto;
 margin-left: auto;
 margin-right: auto;
 font-family: garamond, serif;
 font-size: 16px;
 }

h1 {
 text-align: center;
 }

p {
 text-align: justify;
 }
</style>
<script="text/javascript">
document.write("Hello World!");
<body onload="window alert('Document Loaded');">
</script>
<noscript>JavaScript is not enabled!</noscript>
</head>
<body id="container">
<header><h1>JavaScript No.1</h1></header>

<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum bibendum velit non ultrices. Aenean nulla massa, blandit sit amet erat vitae, cursus luctus nisi. Curabitur sed arcu nisi. 
Praesent sed elit sit amet urna vestibulum bibendum. Quisque eleifend ex imperdiet lacus interdum, at ultricies ex porta. Sed ac cursus risus. Ut tempor tellus id mi faucibus, ut varius est dapibus. 
Nunc finibus risus sem. Aliquam felis dolor, tempor eu mi eu, dictum commodo lorem. Suspendisse potenti. Vivamus porta aliquam tempus. Curabitur facilisis velit sed elit elementum congue.</p>

<p>Sed sollicitudin convallis diam, vel feugiat massa. Phasellus congue in libero ac pretium. Nunc volutpat ut lorem maximus eleifend. Mauris tincidunt rutrum dapibus. 
Vestibulum mattis quam est, eget varius erat fermentum eu. Sed a dui ac neque molestie feugiat tempor eu urna. Praesent dictum nulla id dolor viverra viverra ac fermentum nibh. 
Pellentesque ac commodo mauris, at scelerisque felis. Donec maximus efficitur tincidunt. Donec vehicula vel magna ut consequat. Etiam dolor nunc, malesuada non lobortis sed, pretium ac dolor. 
Quisque semper arcu a quam faucibus, sed dictum quam egestas. Proin volutpat quis erat eget sodales. Nunc a rutrum eros.</p>

<p>Vestibulum non nisl sodales, aliquet neque eget, bibendum elit. Proin dapibus elit vitae maximus aliquet. Maecenas pellentesque, nunc in fermentum blandit, purus libero aliquet ligula, aliquam porta justo diam a tellus. 
Aliquam quis malesuada nisl. Curabitur venenatis rhoncus felis, at faucibus mi luctus non. Ut mattis elementum risus at dignissim. Duis tempor tincidunt ligula, a rutrum erat suscipit quis. Phasellus sed eleifend odio. 
Suspendisse feugiat neque a mattis euismod. Fusce nec vestibulum ante, sit amet hendrerit tellus. Nulla ex libero, facilisis vel tellus quis, dapibus cursus nibh. Donec sodales nisl at urna pharetra vulputate.</p>

</div>
</body>
</html>

see the error `"message": "SyntaxError: unexpected token: identifier",` in the above snippet ... that's because you haven't closed the ` — Jaromanda X, Aug 21 '18 at 22:37
Inline event handlers like `onclick` or `oninput` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don't_use_these) instead. `document.write` is [not recommended](https://stackoverflow.com/q/802854/4642212) for DOM manipulations, as it is obsolete, slow and not suitable for any evolving application. — Sebastian Simon, Aug 21 '18 at 22:39
Thanks guys, I will edit the syntax and re-run the document. Obviously I meant to insert the script within the body tag and not vice versa. Quite embarrassing! People are saying that my syntax is obsolete, therefore my book is obsolete. Thanks for letting me know. Jaramonda, I used the — Mathew1a, Aug 21 '18 at 22:41
I've just checked and there is only one body tag, TheGeekYouNeed. You are referring to the JavaScript syntax. Jaramonda, I have the script within the head section, so why would I need to close it before the body tag instead of before the head tag? — Mathew1a, Aug 21 '18 at 22:45

score -1 · Accepted Answer · answered Aug 21 '18 at 22:43

I have edited your HTML and javascript appropriately.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>JavaScript No.1</title>
<style>
#container {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
font-family: garamond, serif;
font-size: 16px;
}

h1 {
text-align: center;
}

p {
text-align: justify;
}
</style>
<script type="text/javascript">
document.write("Hello World!");
</script>
<noscript>JavaScript is not enabled!</noscript>
</head>
<body id="container" onload="alert('Document Loaded');">
<header><h1>JavaScript No.1</h1></header>

<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum 
bibendum velit non ultrices. Aenean nulla massa, blandit sit amet erat vitae, cursus 
luctus nisi. Curabitur sed arcu nisi. 
Praesent sed elit sit amet urna vestibulum bibendum. Quisque eleifend ex imperdiet 
lacus interdum, at ultricies ex porta. Sed ac cursus risus. Ut tempor tellus id mi 
faucibus, ut varius est dapibus. 
Nunc finibus risus sem. Aliquam felis dolor, tempor eu mi eu, dictum commodo lorem. 
Suspendisse potenti. Vivamus porta aliquam tempus. Curabitur facilisis velit sed elit 
elementum congue.</p>

<p>Sed sollicitudin convallis diam, vel feugiat massa. Phasellus congue in libero ac 
pretium. Nunc volutpat ut lorem maximus eleifend. Mauris tincidunt rutrum dapibus. 
Vestibulum mattis quam est, eget varius erat fermentum eu. Sed a dui ac neque 
molestie feugiat tempor eu urna. Praesent dictum nulla id dolor viverra viverra ac 
fermentum nibh. 
Pellentesque ac commodo mauris, at scelerisque felis. Donec maximus efficitur 
tincidunt. Donec vehicula vel magna ut consequat. Etiam dolor nunc, malesuada non 
lobortis sed, pretium ac dolor. 
Quisque semper arcu a quam faucibus, sed dictum quam egestas. Proin volutpat quis 
erat eget sodales. Nunc a rutrum eros.</p>

<p>Vestibulum non nisl sodales, aliquet neque eget, bibendum elit. Proin dapibus elit 
vitae maximus aliquet. Maecenas pellentesque, nunc in fermentum blandit, purus libero 
aliquet ligula, aliquam porta justo diam a tellus. 
Aliquam quis malesuada nisl. Curabitur venenatis rhoncus felis, at faucibus mi luctus 
non. Ut mattis elementum risus at dignissim. Duis tempor tincidunt ligula, a rutrum 
erat suscipit quis. Phasellus sed eleifend odio. 
Suspendisse feugiat neque a mattis euismod. Fusce nec vestibulum ante, sit amet 
hendrerit tellus. Nulla ex libero, facilisis vel tellus quis, dapibus cursus nibh. 
Donec sodales nisl at urna pharetra vulputate.</p>

</div>
</body>
</html>

Thanks TheGeekYouNeed :-) Can I just ask somebody else to confirm that 'onload' goes within the original body tag instead of within my script tags as my original post shows? — Mathew1a, Aug 21 '18 at 22:52
Thank you, TheGeekYouNeed. Your syntax works. This book I have is obviously apt for the rubbish bin. — Mathew1a, Aug 21 '18 at 22:58
For your case, Yes 'onload' has to go within the opening tag of the body. You may want to read up on event listeners if you want to see what alternatives you have. — Richard McFriend Oluwamuyiwa, Aug 21 '18 at 23:00

How to get JavaScript to display in my browser

1 Answers1