Javascript/연습
계산기 event.target써서 버블링으로 해보기
by SEOKIHOUSE
2023. 6. 1.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
#container {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(5, 100px);
text-align: right;
}
div {
border: 1px solid black;
}
#screen {
grid-column: 1/5;
line-height: 100px;
}
</style>
<script>
window.onload = function () {
const container = document.querySelector("#container");
const screen = document.querySelector("#screen");
container.addEventListener("click", f);
function f(event) {
let resultBtn = event.target.id;
let numBtn = event.target.className;
//숫자입력부분 클릭하면 안되게하는 부분
if(resultBtn == "screen") {
return;
}
if(screen.innerHTML == 0) {
screen.innerHTML = "";
}
// className 클래스 가져오는거
if(resultBtn =="result") {
//값이 0일 경우 =하면 오류나서 방지함
if(screen.innerHTML ==0) {
screen.innerHTML =0;
}else {
let resultValue = eval(screen.innerHTML).toFixed(2);
screen.innerHTML = resultValue;
}
}
else if(numBtn =="btn"){
let numValue = event.target.innerHTML;
screen.innerHTML += numValue;
}else if(resultBtn =="btnClear") {
screen.innerHTML = "";
}
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="screen">0</div>
<button id="btn1">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">+</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">-</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">*</button>
<button class="btn">/</button>
<button class="btn">0</button>
<button id="btnClear">C</button>
<button id="result">=</button>
</div>
</div>
</body>
</html>
