스크립트(script) 추가/제거하는 버튼 만들기

 

script를 실행하고 싶은 이름을 배열에 적으면, 버튼이 생성되며, 누르면 해당 js파일이 실행된다.

index.html에서 script파일을 수동으로 일일이 바꿔야하는 수고를 덜었다.

 

const fileList = ['class', 'promise']

const hasScript = (fileName) => {
  const currentScripts = document.head.getElementsByTagName('script')
  for(scriptElem of currentScripts){
    if(scriptElem.src.includes(fileName)){
      return true
    }
  }
  return false
}

const removeScript = (fileName) => {
  const currentScripts = document.head.getElementsByTagName('script')
  for(scriptElem of currentScripts){
    if(scriptElem.src.includes(fileName)){
      scriptElem.remove()
      console.log(`Success to delete ${fileName}`)
    }
  }
}

const addScript = (fileName) => {
  const script = document.createElement('script')
  script.setAttribute('src', `/${fileName}.js`)
  document.querySelector('head').appendChild(script)
  console.log(`Success to append ${fileName}`)
}

const createButton = (fileName) => {
  const buttonElem = document.createElement('button')
  buttonElem.textContent = fileName
  buttonElem.addEventListener('click', () => {
    hasScript(fileName)
      ? removeScript(fileName)
      : addScript(fileName)
  })
  return buttonElem;
}

const init = () => {
  fileList.forEach((fileName)=>{
    const buttonElem = createButton(fileName)
    document.querySelector('body').append(buttonElem)
  })
}

init()