Associating Different External Javascript Files on Different Buttons

Question

I have 4 categories, and a button for each category! What I want to do is to run different script file upon clicking of a button! For example clicking the sports button runs a different script file and clicking music button runs another!

At the moment the script only runs upon clicking of the first button! Nothing happens when I click the other 3 buttons!

          <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>

You can't repeat element ID's in the same page. They are unique by definition. Use different attributes like your `name` to distinguish what to do in event handling — charlietfl, Dec 31 '17 at 14:33
See my answer and consider accepting as the right one for your case. — Nikola Mitic, Dec 31 '17 at 21:03

Nikola Mitic · Answer 1 · 2017-12-31T14:49:18.987

Here it is. The idea is that on each click you create new script element and append it to the 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 - Should be loaded in html as default

    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 should be relative to the index.js file. You can change logic a little bit if you don't want you scripts to be loaded in the head.

file-one.js

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

file-two.js

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

file-three.js

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

How to link eternal JS question here --> How to link external javascript file onclick of button

Associating Different External Javascript Files on Different Buttons

1 Answers1