자바스크립트 getElementsByName 으로 속성 변경하기

이름에 현빈을 입력 후 확인 버튼을 누르시면 text박스 안의 값이 변경됩니다. 다른 이름을 입력하였을 때에는 placeholder값이 바뀌게 됩니다. 테스트 해 보세요.

이름 :
생년월일 :
신체사항 :

서버로 파일을 전송할 때 <form>태그를 사용하고 name 속성을 사용하여 값을 서버로 전달하게 됩니다. name 속성을 사용하여 선택하고 전달할 값을 동적으로 바꾸는 코딩을 시도해 보았습니다. 물론 ID 를 이용하여 선택할 수 있지만 name을 이용하면 따로 ID를 지정하지 않고 선택할 수 있으며, 특히 라디오(radio)버튼 - 라디오 버튼은 같은 name을 씁니다 -을 이용할 때 getElementsByNmae[n]처럼 사용할 수 있기 때문에 편리합니다.

우선 다음과 같이 HTML을 코딩합니다.

<form>
이름 : <input name="real_name" placeholder="이름을 입력하세요" type="text" /><input onclick="myFunctionA()" type="button" value="확인" /><br />
생년월일 : <input name="real_birth" placeholder="생년월일" type="text" value="" /><br />
신체사항 : <input name="real_physical" placeholder="신체사항" type="text" value="" /></form>

* placeholder 속성은 text(텍스트) 박스 안에 써야 할 사항에 대한 힌트를 보여줍니다.
확인 버튼을 클릭하면 myFunctionA()함수를 호출하도록 하였습니다. 함수에서는 '현빈'이라는 이름을 입력하게 되면 자동으로 생년월일과 신체사항란에 값이 자동으로 입력되게 할 수 있도록 코딩합니다. '현빈'외에 다른 이름이 입력되면 placeholder 값이 '입력하세요' 변경되도록 하겠습니다.
다음은 자바스크립트 소스입니다.

<script>
function myFunctionA(){
  var x= document.getElementsByName("real_name")[0].value;//이름에 입력된 value를 가져옵니다.
  if(x=="현빈"){
    document.getElementsByName("real_birth")[0].value="1982년 9월 25일";
    document.getElementsByName("real_physical")[0].value="184cm, 74kg";
  }else{
    document.getElementsByName("real_birth")[0].placeholder="입력하세요";
    document.getElementsByName("real_physical")[0].placeholder="입력하세요";
 }
}
</script>