<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script>
function calc(){
//첫번째 수 입력
var x = parseInt(prompt('첫번째 수 입력'));
//두번째 수 입력
var y = parseInt(prompt('두번째 수 입력'));
//연산자 입력
var oper = prompt("연산자 입력");
//계산 - 연산자 비교 - if ~ else
var res;
if(oper == "+") {
res = x + y;
}else if(oper == "-") {
res = x - y;
}else if(oper == "*") {
res = x * y;
}else if(oper == "/") {
res = x / y;
res = res.toFixed(2);
}
//출력 내용 작성
str = "첫번째 정수 : " + x + "<br>";
str += "두번째 정수 : " + y + "<br>";
str += "연산자 입력 : " + oper + "<br>"
str += "계산 결과 : " + x + oper + y +" = "+ res + "<br>";
//div 요소 검색
var out = document.querySelector('div');
//출력
out.innerHTML = str;
}
</script>
<style>
div{
border : 1px solid green;
padding : 10px;
font-size : 1.5em;
}
</style>
</head>
<body>
<pre>
확인버튼 클릭하면 두개의 수와 연산자를 입력 받는다
입력은 prompt를 이용한다
연산자를 비교해서 두 수를 연산한다
div에 출력한다
</pre>
<input type="button" onclick="calc()" value="확인">
<br><br>
<div></div>
</body>
</html>
신입 개발자 입니다!!!