문서 객체 모델 이벤트 연산

  문서 객체모델의 이벤트 연산

문서 객체모델을 이용하여 이벤트를 걸어주고, 이벤트 실행시 연산되어 결과값을 출력하는 작업을 해보자.

 

▶자바스크립트 이벤트 연산

아이디 action버튼 클릭시 input의 숫자값을 곱하여 아이디 result에 결과값을 출력하고,

계산값이 50 이상일 경우 텍스트 색상 빨강 49 이하일 경우 검정으로 설정하였다.

 

X

결과값

<input type="number" name="01" style="width:30px;"> X 
<input type="number" name="02" style="width:30px;">
<button type="button" id="action">계산하기</button>
<div id="result" style="border 1px solid #000000; width:200px;">
	<p>결과값</p>
</div>
<script type="text/javascript">
	var div = document.getElementById('result');
	var action = document.getElementById('action');
	action.addEventListener('click',function(){
		var input = document.getElementsByTagName('input');
		var result = Number(input[0].value)*Number(input[1].value);
		if(result>=50){
			div.style.color = '#ff0000';
		}else{
			div.style.color = '#000000';
		}
		div.innerHTML = result;		
	});	
</script>

 

 

▶ 자바스크립트 this 활용

readonly 속성이 부여된 input 박스 result 는 값을 웹에서 수정하지 못한다.

상품가격은 5천원이다. 수량을 선택할 경우 아이디 result에 총 상품가격을 상품가격 x 수량만큼 계산하여 적용하였다.

 

상품가격 :

상품수량 : :: 수량 선택 :: 1 2 3 4

총 계산 금액 :

상품가격 : <input type="number" id="price" value="5000" readonly="readonly"> 
상품수량 : 
<select id="num">
	<option value="0">:: 수량 선택 ::</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>
<div>
	총 계산 금액 : <input type="text" id="result" value="" readonly="readonly">
</div>
<script type="text/javascript">
	var num = document.getElementById('num');
	num.addEventListener('change',function(){
		var result = document.getElementById('result');
		var price = document.getElementById('price');
		result.value = price.value * this.value;
	});
</script>