Индикатор прокрутки Javacript работает только в документе HTML - PullRequest
Новая
       0

Индикатор прокрутки Javacript работает только в документе HTML

0 голосов
/ 07 мая 2020

Так что я новичок в HTML и особенно в Jacascript, поэтому пока не могу отладить свой код.

Мне нужен индикатор прокрутки в моем заголовке, и я нашел шаблон на W3schools , который я скопировал в свой HTML. Скрипт работает так, как должен, когда он находится в документе HTML (как в шаблоне), но когда я помещаю точно такой же код в скрипт. js и ссылаюсь на него в HTML, используя <script src="js/script.js"></script>, сценарий полон кодов ошибок, и их не будет, когда я запустил веб-сайт.

Как один и тот же код 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 'myFunction' использовался до того, как он был определен. Window .onscroll = function () {myFunction ()};

  • 2 Ожидается ';', а вместо этого увидел '}'. window.onscroll = function () {myFunction ()};

  • 5 Отсутствует инструкция use strict. Var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

  • 5 Ожидается. var 'в столбце 5, а не в столбце 3. var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

  • 6 Ожидается' var 'в столбце 5, а не в столбце 3 . var height = document. documentElement.scrollHeight - document.documentElement.clientHeight;

  • 6 Объедините это с предыдущим оператором var. var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  • 7 Ожидается 'var' в столбце 5, а не в столбце 3. var scrolled = (winScroll / height) * 100 ;

  • 7 Объедините это с предыдущим оператором var. var scrolled = (winScroll / height) * 100;

  • 8 Ожидаемый «документ» в столбце 5, а не в столбце

  • document.getElementById ( "myBar"). style.width = scrolled + "%";

    ESLint (6)

  • 2 ОШИБКА: 'окно' не определено. [no-undef] window.onscroll = function () {myFunction ()};

  • 5 ОШИБКА: 'документ' не определен. [no-undef] var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

  • 5 ОШИБКА: 'документ' не определен. [no-undef] var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

  • 6 ОШИБКА: «документ» не определен. [no-undef] var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  • 6 ОШИБКА: 'документ' не определен. [no-undef] var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  • 8 ОШИБКА: 'документ' не определен. [no-undef] document.getElementById ("myBar"). style.width = scrolled + "%";

Спасибо!

1 Ответ

2 голосов
/ 07 мая 2020

Вы не включаете тег <script> HTML в файлы JS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...