所以我是HTML的新手，尤其是Jacascript，所以我还不能真正调试我的代码。
我想要在我的标题中有一个滚动指示符，并在W3schools上找到了一个模板，我将其复制到了我的HTML中。当脚本在HTML文档中时(就像在模板中一样(，它可以正常工作，但当我把完全相同的代码放在script.js中，并使用<script src="js/script.js"></script>在HTML中引用它时，脚本中充满了错误代码，当我运行网站时不会。
同一个JS代码如何根据我将代码放在哪里而表现不同？或者我在编码时做错了什么？
<!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>
我想要运行的JS是：
<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>
错误为：
JSLint(11(
2"function"和'('.window.onscroll=函数((｛myFunction((｝；
2缺少"use strict"语句。window.onscroll=函数((｛myFunction((｝；
2"myFunction"在定义之前已使用。window.onscroll=function((｛myFunction((｝；
2应为"；"而是看到了"｝"。window.onscroll=函数((｛myFunction((｝；
5缺少"use strict"语句。var winScroll=document.body.scrollTop | | document.dococumentElement.scrollTop；
5第5列应为"var"，而不是第3列。var winScroll=document.body.scrollTop | | document.dococumentElement.scrollTop；
6第5列应为"var"，而不是第3列。var高度=document.dococumentElement.scrollHeight-document.dococumentElement.clientHeight；
6将其与前面的"var"语句结合使用。var高度=document.dococumentElement.scrollHeight-document.dococumentElement.clientHeight；
7第5列应为"var"，而不是第3列。var scrolled=(winScroll/高度(*100；
7将其与前面的"var"语句结合起来。var滚动=(winScroll/height(*100；
8第5列应为"文档"，而非列
document.getElementById("myBar"(.style.width=滚动+"%"；
ESLint(6(
2错误：未定义"window"。[no undef]window.onscroll=function((｛myFunction((｝；
5错误：未定义"document"。[no unde]var winScroll=document.body.scrollTop | | document.dococumentElement.scrollTop；
5错误：未定义"document"。[no unde]var winScroll=document.body.scrollTop | | document.dococumentElement.scrollTop；
6错误：未定义"document"。[no undef]var高度=document.dococumentElement.scrollHeight-document.dococumentElement.clientHeight；
6错误：未定义"document"。[no undef]var高度=document.dococumentElement.scrollHeight-document.dococumentElement.clientHeight；
8错误：未定义"document"。[no undef]document.getElementById("myBar"(.style.width=滚动+"%"；
JS文件中不包含<script>HTML标记。