👩💻 counter
버튼에 따라서 숫자값이 +1 되거나 -1 되는 기능
HTML
count_number: 버튼에 의해 값이 바뀌는 textbutton: 버튼에 따라 값 증가, 감소, 리셋
...
<body>
<div class="container">
<div class="title">Counter</div>
<div class="count_number">0</div>
<div class="button_block">
<button class="btn_decrease">DECREASE</button>
<button class="btn_reset">RESET</button>
<button class="btn_increase">INCREASE</button>
</div>
</div>
</body>
...Javascript
querySelector을 통해 각 버튼의class명을 불러옴- 각 버튼마다
addEventListener을 통해click이벤트 생성 textContent로count값을 불러와 새로운 숫자 값 부여
document.addEventListener("DOMContentLoaded", function () {
const count = document.querySelector(".count_number");
const btnDec = document.querySelector(".btn_decrease");
const btnRe = document.querySelector(".btn_reset");
const btnInc = document.querySelector(".btn_increase");
btnDec.addEventListener("click", function () {
let num = count.textContent;
num = Number(num) - 1;
count.textContent = num;
colorChange();
});
btnRe.addEventListener("click", function () {
count.textContent = 0;
colorChange();
});
btnInc.addEventListener("click", function () {
let num = count.textContent;
num = Number(num) + 1;
count.textContent = num;
colorChange();
});
function colorChange() {
if (Number(count.textContent) < 0) {
count.style.color = "red";
} else if (Number(count.textContent) > 0) {
count.style.color = "green";
} else if (Number(count.textContent) == 0) {
count.style.color = "black";
}
}
});구현결과
💭다른 분의 코드
HTML
...
<body>
<div class="container">
<div class="title">Counter</div>
<div class="count_number">0</div>
<div class="button_block">
<button class="btn decrease">DECREASE</button>
<button class="btn reset">RESET</button>
<button class="btn increase">INCREASE</button>
</div>
</div>
</body>
...JS
document.addEventListener("DOMContentLoaded", function () {
let count = 0;
const value = document.querySelector(".count_number");
const btns = document.querySelectorAll(".btn");
btns.forEach(function (btn) {
btn.addEventListener("click", function (e) {
const classes = e.currentTarget.classList;
if (classes.contains("decrease")) {
count--;
} else if (classes.contains("reset")) {
count = 0;
} else if (classes.contains("increase")) {
count++;
}
if (count < 0) {
value.style.color = "red";
} else if (count > 0) {
value.style.color = "green";
} else if (count === 0) {
value.style.color = "black";
}
value.textContent = count;
});
});
});구현결과
👀관련개념
1. forEach()
- 배열의 크기만큼 반복 실행되며, 배열 요소의 개수에 따라 콜백 함수가 호출되는 횟수가 결정됨
const numbers = [10, 25, 30, 45];
let foundNumber = null;
numbers.forEach(function(number) {
if (number > 30) {
foundNumber = number;
}
});
console.log(foundNumber); // 출력: 45forEach()함수는 반환 값이 없으므로 새로운 배열을 생성하지 않음
const numbers = [1, 2, 3, 4, 5];
const result = numbers.forEach(function(number) {
return number * 2;
// 어떤 값을 반환해도 forEach()의 반환 값은 여전히 undefined
});
console.log(result); // 출력: undefined2. currentTarget 속성
target: 이벤트가 발생한 바로 그 요소를 직접 가리킴currentTarget: 이벤트 리스너(EventListener)를 가진 요소
3. classList
- DOMTokenList 객체로 element의 class 속성을 보여줌
const classes = element.classList;- class 추가
let div = document.querySelector('#content');
div.classList.add('info');- class 삭제
// remove only
let div = document.querySelector('#content');
div.classList.remove('visible');
// remove multiple
let div = document.querySelector('#content');
div.classList.remove('block', 'red');- 이외에도 replace(교체), contains(존재 확인), toggle(토글) 이 있다.
4. textContent
- 텍스트노드를 추가하고, 해당 엘리먼트의 텍스트 값을 반환함
var msg = document.querySelector('p').textContent;
console.log(msg);
// return : Hello World! [참고자료]
