[Javascript] 버튼 이름 변경하기 (버튼 클릭)

 

HTML로 이미 정의한 버튼의 이름을 이벤트가 발생했을 때 변경하는 방법입니다.

여기서는 버튼을 클릭했을 때, 버튼의 이름을 변경해 보도록 하겠습니다.

 

1. <input type='button' />일 경우
2. <button></button> 일 경우

 

1. <input type='button' />일 경우

<input
  type='button'
  id='btn' 
  onclick='changeBtnName()'
  value='클릭!!'
/>

function changeBtnName()  {
  const btnElement 
    = document.getElementById('btn');
  
  btnElement.value = "새이름!";
}

 

btnElement.value = "새이름!";

버튼이 <input type='button' />으로 정의된 경우

element의 value 값을 변경하여, 버튼 이름을 변경할 수 있습니다.

 

 

2. <button></button> 일 경우

텍스트 변경 하기

<button 
  id='btn' 
  onclick='changeBtnName()'> 
  클릭!! 
</button>

function changeBtnName()  {
  const btnElement = document.getElementById('btn');
  btnElement.innerText = '새이름!';
}

 

btnElement.innerText = '새이름!';

버튼이 <button></button>으로 정의된 경우

element의 innerText 속성을 변경하여, 버튼 이름을 변경 할 수 있습니다.

 

 

HTML 넣기

<button 
  id='btn' 
  onclick='changeBtnName()'> 
  클릭!! 
</button>

function changeBtnName()  {
  const btnElement 
    = document.getElementById('btn');
  
  const html 
    = '<div style="color:red"> 새이름!! </div>';
  
  btnElement.innerHTML = html;
}

 

btnElement.innerHTML = html;

<button /> 태그를 사용하여 버튼을 정의한 경우에는

element의 innerHTML 속성에 HTML태그를 지정하여

버튼 안 텍스트의 스타일을 정의하거나 변경해 줄 수도 있습니다.

위 예제는 클릭하면 버튼의 이름도 변경되고, 색깔도 빨간색으로 변경됩니다.