[QUIZ] 문자 / 숫자 누적 연산
29 Sep 2021 -
1 minute read
문자와 숫자의 누적 연산 결과 출력하기
See the Pen 문자 / 숫자 누적 출력 by Jinsol (@losuif) on CodePen.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연산과 연결 : 문자/숫자 누적</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrap">
<h1>문자/숫자의 누적 결과 출력</h1>
<fieldset>
<legend> 입력 </legend>
<input type="text" id="input" size="6">
<span id="btn" onclick="fnProc()"> + </span>
</fieldset>
<fieldset>
<legend> 숫자형 누적 연산 결과 </legend>
<div>출력결과 : </div>
<span id="numRes"></span>
</fieldset>
<fieldset>
<legend> 문자형 누적 연산 결과 </legend>
<div>출력결과 : </div>
<span id="strRes"></span>
</fieldset>
</div>
<!-- div#wrap -->
<script src="script/script.js"></script>
</body>
</html>
CSS
@charset "UTF-8";
#wrap {
width: 600px;
margin: 10px auto;
padding: 10px;
border: 1px solid #000;
}
h1 {
text-align: center;
}
fieldset {
font-size: 20px;
margin: 20px;
padding: 20px;
}
input, button {
font-size: 20px;
padding: 4px 10px;
}
#btn {
border: 1px solid #000;
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
background-color: rgb(245, 218, 213);
}
#btn:hover {
cursor: pointer;
box-shadow: 1px 1px black;
border-width: 0.5px;
}
#btn:active {
background-color: rgba(255, 99, 71, 0.7);
color: white;
}
JavaScript
let sum = 0;
// 누적연산될 수 있도록 전역변수 적용
// 함수내부에서 지역변수로 사용하면 매번 0으로 초기화
let stack = "";
// 누적연결 될 수 있도록 전역변수 적용
function fnProc(){
let data = document.getElementById("input").value;
data = data.trim();
// 숫자형 누적 연산
numData = Number(data); //parseInt(data)
sum += numData;
document.getElementById("numRes").innerText = sum;
// 문자형 누적 연결
stack += data;
document.getElementById("strRes").innerText = stack;
}