2017-12-31 41 views
0

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

동일한 페이지에서 요소 ID를 반복 할 수 없습니다. 그것들은 정의상 독특합니다. 이벤트 핸들링에서 할 일을 구별하기 위해 이름과 같은 다른 속성을 사용하십시오. – 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

관련 문제