[JS] 만 나이 계산하기

 인풋필드 값이 변경될 때 해당 함수를 실행시켜 만 나이를 계산하는 함수만들기   

 

 

1. HTML 요소 가져오기 : 

`nameBirthInput`, `childBirthInput`, `nameAgeInput`, `childAgeInput `변수들은 각각 HTML 요소를 가져오는 getElementById 함수를 사용하여 해당 인풋 필드들을 선택한다. `name_birth_val`은 신청자 생년월일을 입력하는 인풋 필드, `child_birth_val`은 자녀 생년월일을 입력하는 인풋 필드, `name_age_val`은 신청자의 만 나이를 표시하는 인풋 필드, `child_age_val`은 자녀의 만 나이를 표시하는 인풋 필드를 가리킨다.

 

2. 만 나이 계산 함수(`calculateAge`) : 

- calculateAge 함수는 인풋 필드의 값을 기반으로 만 나이를 계산하고 해당 값을 인풋 필드에 설정하는 역할을 한다.

- currentDate 변수에는 현재 날짜를 저장한다.

- inputDate 변수에는 인풋 필드의 값인 생년월일을 Date 객체로 변환하여 저장한다.

- age 변수에는 현재 연도에서 생년월일 연도를 빼서 초기값으로 설정한다.

- 만약 현재 월이 생년월일 월보다 작거나, 현재 월이 생년월일 월과 같지만 현재 일이 생년월일 일보다 작은 경우, 나이를 1 빼준다. 이는 생년월일이 아직 도래하지 않은 경우에는 한 살을 빼야 하기 때문.

- 마지막으로 ageInput에 계산된 만 나이를 문자열로 설정하여 해당 인풋 필드에 표시한다.

 

3. 인풋필드 값 변경 시 이벤트 리스너 등록 : 

`nameBirthInput`과 `childBirthInput` 인풋 필드의 값이 변경될 때 calculateAge 함수를 실행하는 이벤트 리스너를 등록한다. 이를 통해 생년월일이 변경되면 해당하는 만 나이가 자동으로 계산되어 표시다.

 

.

.

.

 

JSP

<table>
	<tbody>
    	<tr>
        	<th>신청자 생년월일</th>
            <td>
            	<input id="name_birth_val" type="date">
                만 <input id="name_age_val" type="text"> 세
            </td>
        </tr>
        
        <tr>
        	<th>자녀 생년월일</th>
            <td>
            	<input id="child_birth_val" type="date">
                만 <input id="child_age_val" type="text"> 세
            </td>
        </tr>
    </tbody>
</table>

 

 

Javascript

<script  type="text/javascript">
		/* 만 나이 계산하기 */
		
		// HTML 요소 가져오기
		const nameBirthInput = document.getElementById('name_birth_val');  //date인풋
		const childBirthInput = document.getElementById('child_birth_val');
		const nameAgeInput = document.getElementById('name_age_val');  //만 나이 인풋
		const childAgeInput = document.getElementById('child_age_val');
		
		// 만 나이 계산 함수
		function calculateAge(input, ageInput) {
		  const currentDate = new Date();
		  const inputDate = new Date(input.value);
		  
		  var age = currentDate.getFullYear() - inputDate.getFullYear();
		
		  if (
		    currentDate.getMonth() < inputDate.getMonth() ||
		    (currentDate.getMonth() === inputDate.getMonth() &&
		      currentDate.getDate() < inputDate.getDate())
		  ) {
		    age--;
		  }
		
		  // 만 나이 텍스트로 변환
		  ageInput.value = age.toString();
		}
		
		// 인풋 필드의 값이 변경될 때 calculateAge 함수 실행
		nameBirthInput.addEventListener('input', function() {
		  calculateAge(nameBirthInput, nameAgeInput);
		});
		
		childBirthInput.addEventListener('input', function() {
		  calculateAge(childBirthInput, childAgeInput);
		});
  </script>