minus btn의 경우에는 0이 되면 더이상 count가 내려가지 않도록 만들었음
<body>
<span class="counter">0</span>
<button class="plus">+</button>
<button class="minus">-</button>
<script>
const counter = document.querySelector(".counter");
const plusBtn = document.querySelector(".plus");
const minusBtn = document.querySelector(".minus");
let count = 0;
function increase() {
count++;
counter.innerText = count;
}
function decrease() {
count <= 0 ? 0 : count--;
counter.innerText = count;
}
plusBtn.addEventListener("click", increase);
minusBtn.addEventListener("click", decrease);
</script>
</body>
<body>
<span class="counter">0</span>
<button class="plus">+</button>
<button class="minus">-</button>
<script>
class Counter {
constructor({
initialNum = 0,
counterClassName,
plusClassName,
minusClassName,
}) {
this.count = initialNum;
this.counter = document.querySelector(counterClassName);
this.counter.innerText = initialNum;
this.plusBtn = document.querySelector(plusClassName);
this.minusBtn = document.querySelector(minusClassName);
this.setEventListener();
}
setEventListener = () => {
this.plusBtn.addEventListener("click", this.increase);
this.minusBtn.addEventListener("click", this.decrease);
};
increase = () => {
this.count++;
this.repaint();
};
decrease = () => {
this.count <= 0 ? 0 : this.count--;
this.repaint();
};
repaint = () => {
this.counter.innerText = this.count;
};
}
const counter = new Counter({
counterClassName: ".counter",
plusClassName: ".plus",
minusClassName: ".minus",
});
</script>
</body>
import React from "react";
class Counter extends React.Component {
state = {
count: 0,
};
increase = () => {
this.setState((current) => ({ count: current.count + 1 }));
};
decrease = () => {
this.setState((current) => ({
count: current.count <= 0 ? 0 : current.count - 1,
}));
};
render() {
const { count } = this.state;
return (
<div>
<span>{count}</span>
<button onClick={this.increase}>Add</button>
<button onClick={this.decrease}>Minus</button>
</div>
);
}
}
export default Counter;
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increase = () => setCount(count + 1);
const decrease = () => setCount(count <= 0 ? 0 : count - 1);
return (
<div>
<span>{count}</span>
<button onClick={increase}>Add</button>
<button onClick={decrease}>Minus</button>
</div>
);
}
export default Counter;