I'm having trouble understanding why my volume slider doesn't work whenever the JS is in a JavaScript file, but works whenever its in a html file with the < script> tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>wynn</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/v4-shims.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<script src="script.js"></script> <!-- this has the same thing as the bottom JS has. -->
<script>
window.onload = function() {
twemoji.parse(document.body, {
folder: 'svg',
ext: '.svg'
});
}
</script>
<style>
img.emoji {
width: 20px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="center-screen">
<div class="card" style="width: 500px;">
<div class="card-body">
<!-- BANNER -->
<img src="" class="ay banner" style="width: 400px; height: 0px;">
<!-- PFP + NAME -->
<h5 class="card-title profiletext"><img src="https://cdn.discordapp.com/avatars/668093899683790859/a_57ab56ba8ed8be7ffef2686a81129ac3.gif" class="round profile" style="width: 100px; height: 100px;">wynn</h5>
<!-- DESCRIPTION -->
<p class="card-text">i am wynn u know me from some places or you're just clicking on random peoples profiles on discord, either way hi</p>
<!-- VOLUME SLIDER -->
<div class="card-footer">
<span id="play-pause-button" class="input-group-text"><input type="range" id="volume-slider" min="0" max="100" value="50" style="width: 500px;">
</span>
<!-- DIVS -->
</div>
</div>
</div>
</div>
<figure>
<a href="https://discord.com/users/668093899683790859" target="_blank" class="corner_img"><i class="fab fa-discord"></i>
<a href="https://twitter.com/heysorokin" target="_blank" class="corner_img2"><i class="fab fa-twitter"></i>
</a>
</a>
</figure>
<script type="text/javascript">
var audio = new Audio("audio.mp3");
audio.volume = 0.5;
audio.loop = true;
document.onclick = function() {
audio.play();
}
let volume = document.getElementById('volume-slider');
volume.addEventListener("change", function(e) {
audio.volume = e.currentTarget.value / 100;
})
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
The Volume slider code is at the bottom. Another thing to note is that the volume slider won't work if the JavaScript is at the top of the code instead of the bottom, maybe it is due to loading errors? I'm not sure and I really need help.