Study/JavaScript
JavaScript ) 간단한 click Counter 만들어보기
JongIk
2022. 3. 16. 17:30
반응형
click counter
버튼을 누르면 1씩 증가, 감소하는 카운터
실행화면
.gif)
코드
<!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>JS Practice</title>
</head>
<body>
<!-- 제목 -->
<script>
let helloTag = document.createElement("div");
let helloText = document.createTextNode('Hello JS');
helloTag.appendChild(helloText);
document.body.appendChild(helloTag);
</script>
<p id="count">0</p>
<script>
<!-- '+1' 버튼 추가 -->
let plusBtn = document.createElement('button');
let plusBtnText = document.createTextNode('+1');
plusBtn.appendChild(plusBtnText);
document.body.appendChild(plusBtn);
<!-- '-1' 버튼 추가 -->
let minusBtn = document.createElement('button');
let minusBtnText = document.createTextNode('-1');
minusBtn.appendChild(minusBtnText);
document.body.appendChild(minusBtn);
<!-- 현재 출력되어있는 값 가져오기 -->
let valTag = document.getElementById('count');
console.log(valTag.innerHTML);
let val = valTag.innerHTML;
<!-- '+1' 버튼을 누를 경우 이벤트 발생 -->
plusBtn.addEventListener("click",clickPlusBtn);
function clickPlusBtn(){
val++;
console.log(val);
valTag.innerText = val;
// 변경된 val 값을 다시 출력하기
}
<!-- '-1' 버튼을 누를 경우 이벤트 발생 -->
minusBtn.addEventListener("click", clickMinusBtn);
function clickMinusBtn() {
val--;
console.log(val);
valTag.innerText = val;
// 변경된 val 값을 다시 출력하기
}
</script>
</body>
</html>매번 프레임워크를 활용한 학습 및 프로젝트를 진행하다보니 javascript 에 소홀했던 것 같습니다.. 아주 기초적인 부분부터 다시 복습해볼 계획입니다.
반응형