所以我是HTML的新手，特别是Jacascript，所以我还不能真的调试我的代码。
我想要一个滚动指示器在我的头，并在W3schools上找到一个模板，我复制到我的HTML。当脚本在HTML文档中（就像在模板中一样）时，它会正常工作，但当我将完全相同的代码放在script.js中，并在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=function（）{myFunction（）}之间应正好有一个空格；
2缺少“use strict”语句。Window.OnScroll=function（）{myFunction（）}；
2“My Function”在定义之前已使用。Window.OnScroll=function（）{myFunction（）}；
2应为“；”而是看到了“}”。window.onscroll=function（）{myFunction（）}；
5缺少“use strict”语句。var winScroll=document.body.scrolltop document.documentelement.scrolltop；
5第5列应为“var”，而不是第3列。var winScroll=document.body.scrolltop document.documentelement.scrolltop；
6第5列应为“var”，而不是第3列。var height=Document.DocumentElement.ScrollHeight-Document.DocumentElement.ClientHeight；
6将此与前面的“var”语句结合起来。var height=Document.DocumentElement.ScrollHeight-Document.DocumentElement.ClientHeight；
7第5列应为“var”，而不是第3列。var scrolled=（winScroll/高度）*100；
7将此与前面的“var”语句结合起来。var scrolled=（winScroll/高度）*100；
8第5列应为“document”，而不是第5列
Document.GetElementById（“MyBar”）.Style.Width=scrolled+“%”；
ESLint（6）
2错误：未定义“window”。[no-undef]window.onscroll=function（）{myFunction（）}；
5错误：未定义“document”。[no-undef]var winScroll=document.body.scrolltop document.documentelement.scrolltop；
5错误：未定义“document”。[no-undef]var winScroll=document.body.scrolltop document.documentelement.scrolltop；
6错误：未定义“document”。[no-undef]var height=Document.DocumentElement.ScrollHeight-Document.DocumentElement.ClientHeight；
6错误：未定义“document”。[no-undef]var height=Document.DocumentElement.ScrollHeight-Document.DocumentElement.ClientHeight；
8错误：未定义“document”。[no-undef]document.getElementById（“MyBar”）.style.width=scrolled+“%”；
