JavaScript에서 버튼(button)의 값을 가져오려면 value 속성을 사용하면 됩니다. 버튼 요소에 미리 지정해 둔 value 속성값은 element.value 형태로 간단하게 읽어올 수 있습니다.
버튼의 값과 텍스트의 차이
버튼에서 자주 혼동되는 두 가지 개념이 있습니다.
- innerHTML — 버튼 화면에 실제로 표시되는 텍스트(내부 HTML)를 반환합니다.
- value — 버튼 태그에 설정된
value속성값을 반환합니다.
두 값은 서로 다르므로, 용도에 맞게 적절한 속성을 선택해서 사용하는 것이 중요합니다.
예제
다음 코드를 실행하면 버튼의 표시 텍스트와 value 속성값을 각각 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<button id="btn" type="button" value="my_button">My Button</button>
</form>
<script>
var str1 = document.getElementById("btn").innerHTML;
var str2 = document.getElementById("btn").value;
document.write("Button text: "+str1);
document.write("<br>Button value: "+str2);
</script>
</body>
</html>실행 결과
Button text: My Button Button value: my_button
위 결과에서 볼 수 있듯이 innerHTML은 버튼에 보이는 텍스트인 "My Button"을 반환하고, value 속성은 태그에 지정된 "my_button"을 반환합니다. 이처럼 JavaScript에서는 document.getElementById()로 버튼 요소에 접근한 뒤 value 속성을 사용하면 손쉽게 버튼의 값을 찾을 수 있습니다.