Javascript - 버튼 이름 변경하기

버튼을 누를 때, Javascript로 버튼의 이름을 변경하는 방법을 소개합니다.

버튼 클릭 시, 버튼 텍스트 변경

HTML

아래와 같이 버튼이 있고, 이 버튼을 클릭할 때 changeButtonText() 함수를 호출합니다. 그리고, 이 함수에서 버튼의 이름을 변경하려고 합니다.

<button id="myButton" onclick="changeButtonText()">Hello</button>

Javascript

myButton으로 button의 요소를 찾고, innerText를 변경합니다. innerText는 화면에 보이는 버튼의 이름입니다.

버튼을 누를 때, 아래와 같이 이름을 토글하도록 구현하였습니다.

• innerText가 Hello 일 때, World로 변경
• innerText가 World 일 때, Hello로 변경

function changeButtonText() {
  var button = document.getElementById("myButton");

  if (button.innerText === "Hello") {
    button.innerText = "World";
  } else {
    button.innerText = "Hello";
  }
}