2017-12-31 27 views
0

私は4つのカテゴリと各カテゴリのボタンを持っています!私がしたいのは、ボタンをクリックすると別のスクリプトファイルを実行することです!たとえば、スポーツボタンをクリックすると別のスクリプトファイルが実行され、音楽ボタンをクリックすると別のスクリプトファイルが実行されます。異なるボタンで異なる外部Javascriptファイルを関連付ける

現在のところ、スクリプトは最初のボタンをクリックすると実行されます。他の3つのボタンをクリックしても何も起こりません!

  <button class="start-btn" id="start" type="button" name="button">Sports</button> 
      <button class="start-btn" id="start" type="button" name="button1">Movies</button> 
      <button class="start-btn" id="start" type="button" name="button2">Politics</button> 
      <button class="start-btn" id="start" type="button" name="button3">Mythology</button> 

      <audio id="game-audio" src="assets/audio/game-audio.mp3" autoplay loop></audio> 



<script id="category" data-name="20" src="assets/javascript/app1.js"></script> 
</body> 
</html> 
+1

同じページ内で要素IDを繰り返すことはできません。それらは定義によってユニークです。あなたの 'name'のような異なる属性を使用して、イベント処理で何をするかを区別してください。 – charlietfl

+0

私の答えを見て、あなたのケースに合ったものとして受け入れることを検討してください。 –

答えて

0

ここにあります。アイデアは、クリックごとに新しいスクリプト要素を作成し、それをDOMに追加するというものです。

HTML

<button class="load-script-btn" data-script="file-one.js">Load file one</button> 
<button class="load-script-btn" data-script="file-two.js">Load file two</button> 
<button class="load-script-btn" data-script="file-three.js">Load file three</button> 

INDEX.jsは - index.jsファイルへの相対である必要があり、デフォルト

const loadScriptBtn = document.querySelectorAll('.load-script-btn'); 
    const basePATH = './'; 
    const isScriptLoaded = (scriptName, basePATH) => { 
     const isLoaded = document.querySelectorAll(`script[src="${basePATH}${scriptName}"]`); 
     return isLoaded.length 
    }; 
    const loadExternalScript = (scriptName, basePATH) => { 
     const script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = `${basePATH}${scriptName}`; 
     document.getElementsByTagName("head")[0].appendChild(script); 
     return false; 
    }; 
    loadScriptBtn.forEach((btn)=>{ 
     const scriptToLoad = btn.getAttribute('data-script'); 
     btn.addEventListener('click',()=>{ 
      if(!isScriptLoaded(scriptToLoad, basePATH)){ 
       loadExternalScript(scriptToLoad, basePATH);      
      }; 
     }); 
    }); 

basePathをとしてHTMLにロードする必要があります。 スクリプトを頭にロードしたくない場合は、ロジックを少し変更することができます。

ファイルone.js

console.log('file number one loaded'); 

ファイルtwo.js

console.log('file number two loaded'); 

ファイルthree.js

console.log('file number three loaded'); 

ETERをリンクする方法JS質問はこちら - >How to link external javascript file onclick of button

関連する問題