<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Counter</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 130px;
margin: 20px auto;
font-size: 24px;
color: #3f51b5;
}
button {
padding: 5px 10px;
font-size: 24px;
border-radius: 5px;
color: #3f51b5;
border-color: #3f51b5;
outline: none;
cursor: pointer;
}
.counter {
width: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<button class="increase">+</button>
<div class="counter">0</div>
<button class="decrease">-</button>
</div>
<script>
//변수를 하나 선언해두고, increase가 클릭되면 그변수를 가져와서 누적한후 counter의 innerHtml에 뿌려주기
//decrease를 누르면 변수를 가져와서 뺀후 counter의 innerHtml에 뿌려주기
const $increase = document.querySelector('.increase');
const $counter = document.querySelector('.counter');
const $decrease = document.querySelector('.decrease');
let num = 0;
$increase.addEventListener('click', function(e){
num = num+1;
$counter.innerHTML = num;
//textconent
});
$decrease.addEventListener('click', function(e){
if(num > 0){
num = num-1;
$counter.innerHTML = num;
}
});
</script>
</body>
</html>반응형
'공부 > TIL-D' 카테고리의 다른 글
| analog, dital watch (0) | 2019.05.27 |
|---|---|
| stop-watch (0) | 2019.05.26 |
| toggle (0) | 2019.05.23 |
| todo v2 (0) | 2019.05.21 |
| Todo v1 (0) | 2019.05.20 |