Scroll indicator JavaScript only works in HTML document

Question

So I'm new to HTML and especially Jacascript so I can't really debug my code just yet.

I wanted a Scroll Indicator in my header and found a template on W3schools that I copied to my HTML. The script works as it should when it is in the HTML document (like in the template) but when I put the exact same code in a script.js and refers to it in the HTML using <script src="js/script.js"></script>, the script is full of error codes and won't when I run the website.

How can the same JS code behave different depending on where I put the code? Or have I done something wrong when coding?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Scroll Indicator</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
  </head>
<body>
    
<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>

<div class="content">
  <h3>Scroll Down to See The Effect</h3>
  <p>We have created a "progress bar" to <b>show how far a page has been scrolled</b>.</p>
  <p>It also <b>works when you scroll back up</b>.</p>
  <p>It is even <b>responsive</b>! Resize the browser window to see the effect.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>

And the JS that I wanted to run is:

<script>
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

With the errors being:

JSLint (11)

2 Expected exactly one space between 'function' and '('. window.onscroll = function() {myFunction()};
2 Missing 'use strict' statement. window.onscroll = function() {myFunction()};
2 'myFunction' was used before it was defined. window.onscroll = function() {myFunction()};
2 Expected ';' and instead saw '}'. window.onscroll = function() {myFunction()};
5 Missing 'use strict' statement. var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
5 Expected 'var' at column 5, not column 3. var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
6 Expected 'var' at column 5, not column 3. var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
6 Combine this with the previous 'var' statement. var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
7 Expected 'var' at column 5, not column 3. var scrolled = (winScroll / height) * 100;
7 Combine this with the previous 'var' statement. var scrolled = (winScroll / height) * 100;
8 Expected 'document' at column 5, not column
document.getElementById("myBar").style.width = scrolled + "%";

ESLint (6)
2 ERROR: 'window' is not defined. [no-undef] window.onscroll = function() {myFunction()};
5 ERROR: 'document' is not defined. [no-undef] var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
5 ERROR: 'document' is not defined. [no-undef] var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
6 ERROR: 'document' is not defined. [no-undef] var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
6 ERROR: 'document' is not defined. [no-undef] var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
8 ERROR: 'document' is not defined. [no-undef] document.getElementById("myBar").style.width = scrolled + "%";

Where are you putting it in the HTML? The document is parsed from top to down, and elements don't exist before they've been parsed. So, your script has to be placed so, that it's not executed before the page has been parsed. — Teemu
When you ask a question it's a very good idea to show your work - what have you done, what code have you written. Put it right there in the question. Saying 'full of error codes' doesn't give anybody enough information to help you (as @D.Pardal) already observed. — user10987633
The code does not work in the .js file but when I implement it as <script> // When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()}; function myFunction() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.width = scrolled + "%"; } </script> in the HTML just after the content div it does work. That's my concern — sebbses

Fasani Fasani · Accepted Answer · 2020-05-07T14:50:13

2

votes

You do not include <script> HTML tag in JS files.

Scroll indicator JavaScript only works in HTML document

1 Answers