본문 바로가기
퍼블리셔(프론트)/js

onclick 을 활성화 하기위한 환경(기본상식)

by 장김치 2020. 6. 24.

샘플코드기능 : 클립보드 텍스트 복사

<!-- The text field -->
<input type="text" value="Hello World" id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

 

이거로 오늘 삽질만 30분 했던거같다..

 

 

button을 클릭했을때 이벤트를 발생하기 위한 함수가 정의되어 있는데,

onclick을 사용하는 경우에 해당 이벤트 스크립트는 반드시 한 페이지 안에 정의 되어야한다. 

 

다른 파일 예를들어 한 html 파일 내에 들어가지 않는 경우라 한다면 2가지 버전이 있다.

 

 

 

 

ver1.

jQuery(function(){
    $("button").click(function(){
        var copyText = document.getElementById("myInput");
        copyText.select();
        document.execCommand("Copy");
        alert("Copied the text: " + copyText.value);
    });
});

 

 

ver2.

jQuery(function(){
    $("button").click(function(){
        myFunction();
    });
});


function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
}