JavaScript не работает при связывании файла .js с файлом .html

#javascript #html #progress-bar

Вопрос:

Последние несколько недель я изучал HTML, CSS и javascript. Весь предыдущий опыт программирования, который у меня был, связан с C из моих курсов CS, поэтому я новичок в разработке интерфейсов.

Я написал немного javascript на странице индекса HTML, и функции работают правильно. Однако, когда я добавляю его во внешний файл .js, программа перестает работать.

Вот это index.html файл:

 <!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.0">
    <link rel="stylesheet" href="/style.css"/>
    <title> Progress Bar </title>
</head>
<body>
    <audio id="music" src="trax/coldWorld.wav" controls></audio>

    <div class="progress_bar" id="progress_bar">
        <div class="progressed" id="progressed"></div>
    </div>
</body>

<script src="/audio.js"></script>

</html>

Файл .js:

     var music = document.getElementById('music');
    var progressed = document.getElementById('progressed');
    var progress_bar = document.getElementById('progress_bar');

    music.ontimeupdate = function(e) {
        progressed.style.width = Math.floor(music.currentTime *100 / music.duration)   "%";
    }

    progress_bar.onclick = function(e) {
        music.currentTime = ((e.offsetX / progress_bar.offsetWidth) * music.duration);
    }

Ответ №1:

Вы можете попробовать переместить тег сценария внутрь тега тела и исправить относительный путь

 <!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    ...
    <script src="./audio.js"></script>
</body>
</html>