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 - 应以html格式加载

    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 应该与index.js文件相关。如果您不希望将脚本加载到头部，可以稍微更改一下逻辑。

文件-one.js

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

文件-two.js

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

文件-three.js所

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

如何在这里链接永恒的JS问题 - ＆gt; How to link external javascript file onclick of button

在不同的按钮上关联不同的外部Javascript文件

1 个答案: