HTML DOM 버튼 value 속성이란?
HTML DOM의 버튼 value 속성은 <button> 요소의 value 애트리뷰트와 연결된 속성으로, 버튼이 내부적으로 지니는 숨겨진 값을 지정하는 역할을 합니다. 이 속성을 활용하면 버튼의 value 애트리뷰트 값을 자바스크립트로 자유롭게 가져오거나 변경할 수 있습니다.
흥미로운 점은 브라우저마다 폼 제출 시 전송되는 데이터가 다를 수 있다는 것입니다. 대부분의 브라우저는 버튼을 클릭할 때 value 애트리뷰트에 담긴 텍스트를 서버로 전송하지만, 일부 브라우저는 <button> 태그 사이에 작성된 텍스트(화면에 보이는 버튼 레이블)를 대신 전송합니다. 따라서 폼 처리 로직을 설계할 때 이 차이를 염두에 두는 것이 좋습니다.
구문(Sytax)
value 속성을 설정하는 기본 구문은 다음과 같습니다.
buttonObject.value = text
여기서 text는 버튼에 지정할 초기값을 의미합니다. 반대로 값을 설정하지 않고 속성에 접근하면 현재 저장된 value 문자열이 반환됩니다.
예제
다음은 버튼 value 속성을 실제로 활용한 예제 코드입니다.
<!DOCTYPE html>
<html>
<body>
<button id="Button1" name="random" value="FirstButton">My Button</button>
<p>Click on the below button to change the above button value</p>
<button onclick="changeFunc()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeFunc() {
document.getElementById("Button1").value = "SecondButton";
var x=document.getElementById("Button1").value;
document.getElementById("Sample").innerHTML="The button value is now "+x;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭한 후의 결과는 다음과 같습니다.
코드 상세 분석
먼저 id가 “Button1”이고 value가 “FirstButton”으로 설정된 버튼을 생성했습니다.
<button id="Button1" name="random" value="FirstButton">My Button</button>
그다음에는 클릭 시 changeFunc() 함수를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changeFunc()">CHANGE</button>
changeFunc() 함수는 id “Button1”을 통해 첫 번째 버튼 요소를 찾아낸 뒤, 해당 버튼의 값을 “FirstButton”에서 “SecondButton”으로 변경합니다. 이후 변경된 버튼 값을 변수 x에 할당하고, id가 “Sample”인 단락(<p>) 안에 결과 문자열을 출력하여 사용자에게 변경 사항을 보여줍니다.
function changeFunc() {
document.getElementById("Button1").value = "SecondButton";
var x=document.getElementById("Button1").value;
document.getElementById("Sample").innerHTML="The button value is now "+x;
}