카운터 만들기

DOM 요소를 비구조화 할당 방식으로 넣어서 작성해보자!

<!-- index.html -->
<body>
    <h2 class="number">0</h2>
    <div>
        <button class="increase">+1</button>
        <button class="decrease">-1</button>
    </div>
    <script src="/index.js"></script>
</body>
// index.js
const number = document.querySelector('.number');
const buttons = document.querySelectorAll('button');
const [increase, decrease] = buttons; //querySelectorAll로 DOM 요소를 배열로 받아온것을 비구조화 할당 방식으로 넣은것이다.

increase.onclick = () => {
    const current = parseInt(number.innerText);
    number.innerText = current + 1;
};

decrease.onclick = () => {
    const current = parseInt(number.innerText);
    number.innerText = current - 1;
}
PreviousPractice(실습)Nextreduce

Last updated