HTML DOM의 value 속성은 입력 버튼(input) 요소의 value 속성값을 읽어오거나 수정할 때 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 버튼에 표시되는 텍스트를 동적으로 제어할 수 있어, 클릭 이벤트에 따라 버튼 문구를 바꾸는 등 다양한 인터랙션을 구현할 수 있습니다.
문법(Syntax)
value 속성의 기본 문법은 다음과 같습니다.
1. 값 가져오기(반환)
object.value
2. 값 설정하기(수정)
object.value = "텍스트"
예제
다음은 value 속성으로 버튼의 기존 텍스트를 읽어온 뒤, 새로운 텍스트로 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM value 속성</title>
<style>
body{
text-align:center;
}
.btn{
display:block;
margin:1rem auto;
background-color:#db133a;
color:#fff;
border:1px solid #db133a;
padding:0.5rem;
border-radius:50px;
width:80%;
}
.show-value{
font-weight:bold;
font-size:1.4rem;
color:#ffc107;
}
</style>
</head>
<body>
<h1>value 속성 예제</h1>
<input type="submit" onclick="setValue()" class="btn" value="클릭하면 내 텍스트가 변경됩니다">
<div class="show-value"></div>
<script>
function setValue() {
var btn = document.querySelector(".btn");
document.querySelector(".show-value").innerHTML = "이전 값 = " + btn.value;
document.querySelector(".btn").value = "축하합니다! 값 변경에 성공했습니다";
}
</script>
</body>
</html>
동작 원리
버튼을 클릭하면 setValue() 함수가 호출됩니다. 이 함수는 querySelector()로 .btn 클래스를 가진 버튼 요소를 선택한 뒤, btn.value로 기존 값을 읽어와 .show-value 영역에 출력합니다. 이후 새로운 문자열을 value 속성에 할당하여 버튼의 표시 텍스트를 즉시 변경합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
“클릭하면 내 텍스트가 변경됩니다” 버튼을 누르면 빨간색 버튼의 value 값이 새로운 문구로 바뀌고, 변경 전의 이전 값이 노란색 굵은 글씨로 함께 표시됩니다.
