为我的页面使用需要多个脚本的外部脚本页面
我目前正在制作一个用于教育目的的页面。现在我正在制作一个包含多个按钮的页面，这些按钮包含当你点击它们时，它们将播放音乐的功能。现在我需要10个这样的东西放在每个下面。但我有10个不同的声音片段。如果我把10个不同的脚本放在另一个下面，那会弄得一团糟，我想知道是否有可能把这些脚本放在另一个文件中。或者有更简单的方法可以做到这一点？我有一个想法，这可以容易得多。
这是我使用的脚本和html。
<script>
function playMusic (){
var audio = document.getElementById("geluidsopname");
audio.play();
}
</script>
<button id="voortgang-button" onclick="playMusic()" value="button">
<img id="afspeelbutton" src ="../../../image/afspeelbutton1.png"> </img>Ik heet Marie.
<audio id="geluidsopname" src="../../../voice-recording/Marie.mp3"></audio>
</button>回答 2
Stack Overflow用户
发布于 2016-11-25 20:32:15
您不必为每个元素分配一个唯一的id，您可以通过不同的方法访问它们。以document.querySelector为例。
从HTML事件属性中调用JS函数也可以，但不推荐这样做。直接在JS代码上注册事件要简洁得多。
您可能希望将单个脚本放在body的闭包之前，或者最终将其放入head并在DOMContentLoaded上执行它。
<button class="myBtn" id="button1">
<img src="url">
<audio>
<source src="url" type="audio/mpeg">
Your browser does not support the audio feature.
</audio>
</button>
<script type="text/javascript">
for (var aud in document.querySelectorAll('.myBtn')) {
aud.addEventListener('click', function() {
aud.querySelector('audio').play();
}, false);
}
</script>当然，您可以只将controls属性添加到audio元素，并由浏览器处理与音频控件相关的所有事件：
<button class="myBtn">
<img src="url">
<audio controls>
<source src="url" type="audio/mpeg">
Your browser does not support the audio feature.
</audio>
</button>Stack Overflow用户
发布于 2016-11-25 21:09:43
以下是代码的plunker。我对演示的html结构做了一些修改。仍然有这样的想法:您的脚本使用参数。
// Code goes here
function playMusic ( target ){
console.log(target.getAttribute("target_audio"))
var audio = document.getElementById( target.getAttribute("target_audio") );
audio.play();
}和html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<input type="button" id="voortgang-button" target_audio="geluidsopname" onclick="playMusic( this )" value="button">
<img id="afspeelbutton" src ="../../../image/afspeelbutton1.png">Ik heet Marie.
<audio id="geluidsopname" src="../../../voice-recording/Marie.mp3"></audio>
</body>
</html>如果您愿意，可以将id作为字符串传递给处理程序方法。那么你甚至不需要获取属性的值。
https://stackoverflow.com/questions/40804446
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号