JS在.js文件中无法完全使用，但可以在HTML文件中使用＆lt; script＆gt;标签
我很难理解为什么每当JS在JavaScript文件中时我的音量滑块不起作用，但是每当它在HTML文件中使用＆lt;脚本＆gt;标签。
<!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/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
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/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将您的自定义脚本文件添加为身体标签的最后一个元素。
以下是您的html文件：
Add your custom script file as the last element of your body tag.
Following is your HTML file:
Following is 'myScript.js' file:
最好先渲染HTML和CSS代码，然后渲染脚本，因为它们是相互依存的。
因此，建议您在代码底部添加脚本标签
It is better to render your Html and css code first and then render your script because they are interdependent.
Therefore, it is recommended that you add script tags at the bottom of your code