異なるボタンで異なる外部Javascriptファイルを関連付ける

Question

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

現在のところ、スクリプトは最初のボタンをクリックすると実行されます。他の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> 

Answer 1

ここにあります。アイデアは、クリックごとに新しいスクリプト要素を作成し、それを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