onclick 자바스크립트 버튼 클릭

by

원본: HTML Button onclick – JavaScript Click Event Tutorial

웹 사이트를 방문할 때 마다 링크나 버튼 같은 것을 클릭합니다.

링크는 페이지의 특정 부분이나 다른 페이지로 이동합니다. 반면 버튼은 자바스크립트 이벤트에 의해 조작되어 특정 기능을 실행하게 할 수 있습니다.

이 포스트에서는 두 가지 방법을 사용하여 클릭 이벤트를 실행하는 방법을 알아보겠습니다.

먼저 HTML 코드에서 바로 작성할 수 있는 onclick 속성을 알아보고 보다 현대적으로 자바스크립트 코드를 분리하여 “click” eventListener가 어떻게 작동하는지 살펴보겠습니다.

onclick 이벤트 사용 방법

onclick 이벤트는 버튼을 클릭했을 때 특정 기능을 수행하게 해줍니다. 이는 사용자가 양식을 제출하거나 웹 페이지의 특정 콘텐츠를 변경할 때 등이 될 수 있습니다.

이를 사용하려면 다음과 같이 button의 여는 태그 안에 실행하고 싶은 자바스크립트 함수를 넣습니다:

<button onclick="functionToExecute()">Click</button>

여는 태그에 작성된 코드로 onclick은 순수한 자바스크립트 속성임을 알 수 있습니다. 자바스크립트에서의 함수 호출 방법은 함수이름을 쓰고 뒤에 괄호를 붙이는 것 입니다.

onclick 이벤트 예제

이 이벤트를 실제 실습에 적용할 수 있도록 약간의 스타일링이 포함된 기본 HTML을 준비했습니다.

<link rel="stylesheet" href="styles.css">

<div>
  <p class="name">shinyks</p>
  <button>Change to Blue</button>
</div>

다음은 뒤의 예제 코드에서도 사용할 스타일 지정용 CSS 입니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

p {
  font-size: 2rem;
}

button {
  padding: 7px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.blue {
  background-color: #3498db;
}

button.green {
  background-color: #2ecc71;
}

button.orange {
  background-color: orangered;
}

위의 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.

onclick 예제

여기서 작성해 볼 코드는 버튼을 클릭하면 텍스트의 색상을 파란색으로 변경하는 것 입니다. 다시말해 버튼의 속성에 이 기능을 실행해 줄 onclick을 추가해야 합니다.

따라서 HTML을 약간 변경해줘야 합니다.

<link rel="stylesheet" href="styles.css">

<div>
  <p class="name">shinyks</p>
  <button onclick="changeColor()">Change to Blue</button>
</div>

실행하고자하는 함수는 changeColor() 입니다. 이 함수는 자바스크립트 코드이기 때문에 <script> 태그를 추가하거나 자바스크립트 파일을 추가해야 합니다.

이제 changeColor() 함수를 작성해 보겠습니다.

먼저 조작하려는 요소, 즉 shinyks 텍스트를 가지고 있는 <p> 태그를 선택해야 합니다.

이를 수행하려면 자바스크립트 DOM의 getElementById(), getElementsByClassName(), querySelector() 메소드를 사용할 수 있습니다.

이 포스트에서는 더 현대적인 querySelector() 메소드를 사용하겠습니다. 또한 let 이나 var이 아닌 const를 사용하겠습니다. 이는 변수를 읽기 전용으로 선언하여 더 안전하기 때문입니다.

자바스크립트 코드를 추가하여 다음과 같이 HTML 파일을 수정하겠습니다.

<link rel="stylesheet" href="styles.css">

<div>
  <p class="name">shinyks</p>
  <button onclick="changeColor()">Change to Blue</button>
</div>

<script>
  const name = document.querySelector(".name");

  function changeColor() {
    name.style.color = "blue";
  }
</script>

이제 코드를 실행하고 버튼을 클릭하면 무슨 일이 일어날까요?

onclick 예제

shinyks 텍스트가 파란색으로 바뀌었습니다. 이는 changeColor() 함수에 class가 name인 <p> 태그의 style.color를 blue로 할당했기 때문입니다.

click addEventListener 사용 방법

자바스크립트에는 동일한 작업을 수행하는 여러 가지 방법이 있습니다.

addEventListener() 메소드를 사용하면 HTML 코드에서 자바스크립트를 분리할 수 있습니다.

onclick 속성으로도 동일한 작업을 수행할 수 있지만 여기서는 다른 접근 방법을 취하겠습니다.

기본 addEventListener 구문

element.addEventListener("type-of-event", functionToExecute);

이제 click 이벤트 리스너를 사용하여 shinyks 텍스트를 파란색으로 변경해 보겠습니다. 다음은 새로은 HTML 코드 입니다.

<link rel="stylesheet" href="styles.css">

<div>
  <p class="name">shinyks</p>
  <button>Change Color</button>
</div>

<script>
</script>

이번에는 <script> 에서 버튼도 선택해야 합니다. 이유는 버튼에 onclick 속성을 안쓰고 이벤트 리스너를 사용할 것이기 때문입니다.

따라서 <script> 안에 들어갈 코드는 다음과 같습니다.

const name = document.querySelector(".name");
const btn = document.querySelector("button");

btn.addEventListener("click", function () {
  name.style.color = "blue";
});
click 이벤트 리스너 예제

코드를 실행하여 버튼을 클릭하면 위의 이미지와 같이 shinyks 텍스트가 파란색으로 변하는 것을 확인할 수 있습니다.

관련 글