複数のスクリプトを必要とするマイページに外部スクリプトページを使用

私は現在教育目的のページを作っています。今、私はそれらをクリックすると、彼らは音楽を再生する機能を含む複数のボタンを含むページを作っている。今私はお互いの下でこれらの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>

出典

2016-11-25 dick doeven

あなたはこれを意味します：http://www.w3schools.com/tags/tag_script.asp –

いずれにしても、スクリプトはパラメータを取るように一般化して、次のようにすることができます：onclick = "playMusic （ 'my_audio_id'）」と表示され、スクリプトのコピーは1つだけ必要になります。 –

@vladimirMが面白そうに聞こえる！もう少し説明できますか？私はonclick = "playMusic（私のソース）"を使うこともできませんでしたので、スクリプトを呼び出すと、スクリプトは私のonclickから音楽のソースを取得しますか？それはあなたが意味することですか？私はJavaについてはかなり新しくなっていますが、あなたがそれを手伝ってくれる可能性はありますか？ –

必ずしもすべての要素に固有のidを割り当てる必要はありません。異なる方法でアクセスできます。例えば、document.querySelectorを見てください。

HTMLイベント属性内からJS関数を呼び出すのが細いですが、推奨されていません。あなたのJSコードに直接イベントを登録する方がはるかにクリーンです。

bodyの閉鎖の直前に1つのスクリプトを挿入するか、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>

、あなただけaudio要素にcontrols属性を追加し、ブラウザで扱うオーディオコントロールに関連するすべてのイベントを持つことができます：ここで

<button class="myBtn"> 
    <img src="url"> 
    <audio controls> 
    <source src="url" type="audio/mpeg"> 
    Your browser does not support the audio feature. 
    </audio> 
</button>

出典

2016-11-25 12:32:14 Fehniix

は、コードの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を渡すことができます。次に属性の値を取得する必要はありません。

出典

2016-11-25 13:09:43

複数のスクリプトを必要とするマイページに外部スクリプトページを使用

答えて

関連する問題