2017-12-31 143 views
0

Ich habe 4 Kategorien und eine Schaltfläche für jede Kategorie! Was ich tun möchte, ist eine andere Skriptdatei auf Knopfdruck auszuführen! Wenn Sie zum Beispiel auf die Schaltfläche "Sport" klicken, wird eine andere Skriptdatei ausgeführt und durch Klicken auf die Schaltfläche "Musik" wird eine andere Skriptdatei ausgeführt.Verschiedene externe Javascript-Dateien auf verschiedenen Tasten zuordnen

Im Moment läuft das Skript nur beim Klicken auf die erste Schaltfläche! Nichts passiert, wenn ich auf die anderen 3 Knöpfe klicke!

  <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

Sie können Element IDs nicht auf der gleichen Seite wiederholen. Sie sind per Definition einzigartig. Verwenden Sie verschiedene Attribute wie Ihren 'Namen', um zu unterscheiden, was in der Ereignisbehandlung zu tun ist. – charlietfl

+0

Sehen Sie meine Antwort und betrachten Sie es als die richtige für Ihren Fall. –

Antwort

0

Hier ist es. Die Idee ist, dass Sie bei jedem Klick ein neues Skriptelement erstellen und es an das DOM anhängen.

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 - Sollte in HTML als Standard

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 sollte die index.js-Datei relativ geladen werden. Sie können die Logik ein wenig ändern, wenn Sie nicht wollen, dass Skripte in den Kopf geladen werden.

Datei-one.js

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

Datei-two.js

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

Datei-three.js

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

Wie eter verlinken Nal JS Frage hier ->How to link external javascript file onclick of button

Verwandte Themen