HTML

34일차// javaScript// 계산기 만들기

aesup 2021. 3. 2. 17:15
728x90

getElementById(  )

 

ㆍ 함수 뜻 그대로 생각해본다면 get(가져오다) Element(요소)

    ById(Id로부터) 이 정도로 해석할 수 있을거 같습니다.

 -text 타입일경우 .value로 가져온다

 

 

ㆍ 조금 더 자세히 접근해보자면 태그안의 ID값을 이용해서

    오브젝트에 접근할 수 있습니다.

    < >: 열린태그, </>닫힌태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">



function add(){
	
	document.getElementById("oper").value = "+";

    var n1 = parseInt(document.getElementById("num1").value);

    var n2 = parseInt(document.getElementById("num2").value);

    var sum = n1+n2;

    document.getElementById("result").value = sum;

    }

function sub(){

	document.getElementById("oper").value = "-";
	
    var n1 = parseInt(document.getElementById("num1").value);

    var n2 = parseInt(document.getElementById("num2").value);

    var sub = n1-n2;

    document.getElementById("result").value = sub;

    }

function mul(){
	
	document.getElementById("oper").value = "*";

    var n1 = parseInt(document.getElementById("num1").value);

    var n2 = parseInt(document.getElementById("num2").value);

    var mul = n1*n2;

    document.getElementById("result").value = mul;

    }

function div(){
	
	document.getElementById("oper").value = "/";

    var n1 = parseInt(document.getElementById("num1").value);

    var n2 = parseInt(document.getElementById("num2").value);

    var div = n1/n2;

    document.getElementById("result").value = div;

    }
    

function change(){
	
	document.getElementById("oper").value = "%";

    var n1 = parseInt(document.getElementById("num1").value);

    var n2 = parseInt(document.getElementById("num2").value);

    var change = n1%n2;

    document.getElementById("result").value = change;

    }    
    


</script>




</head>

<body>
<div style="  
			 border: 3px  solid ;
			 width : 850px;
			 height : 500px;
			
			 ">
			 
			 <h1>변수의 연산</h1>
			 <h2>a,b 에 대해서 변수 a와 b의 계산 결과를 표시합니다.</h2>
			 
<button type="button" onclick = "add()">덧셈</button>
<button type="button" onclick = "sub()">뺄셈</button>
<button type="button" onclick = "mul()">곱셈</button>
<button type="button" onclick = "div()"> 나눗셈     </button>
<button type="button" onclick = "change()">나머지</button>
<br>

<input type="text" id = "num1" size = "20" value = "0">
<input type="text" id = "oper" size = "10" value = "">
<input type="text" id = "num2" size = "20" value = "0">
<p>=</p>
<input type="text" id = "result" size = "20" value = "0">




</div>
</body>
</html>
728x90
저작자표시 비영리 변경금지 (새창열림)