JavaScript와 HTML을 활용한 버튼 클릭 횟수 출력 예제

SW 개발/Vanilla JS

JavaScript와 HTML을 활용한 버튼 클릭 횟수 출력 예제

DATA101 2021. 12. 15. 16:06

728x90

🔥 목표

JavaScript와 HTML을 활용하여 간단한 Interactive Web 기능을 구현해 본다.

예제

간단한 예제를 실습해 봅니다. HTML을 활용해 버튼 UI를 생성하고 웹에 출력하고, JavaScript를 통해 사용자가 버튼을 클릭하는 것을 감지하여 클릭 횟수를 실시간으로 업데이트하는 것을 구현해 봅시다.

실습 코드

index.html

<!DOCTYPE html>
<html>
    <body>
        <span>Total Click: 0</span>
        <button id = "btn">버튼</button>
    </body>
    <script>
        let cnt = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function clickCounter(){
            cnt+=1;
            span.innerText = `Total Click: ${cnt}`;
            console.log(cnt);
        }
        button.addEventListener("click",  clickCounter);
    </script>
</html>

실행결과

버튼 클릭 전입니다.

아래와 같이 버튼을 클릭하면 웹 페이지 및 콘솔에 클릭 횟수가 출력되는 것을 확인할 수 있습니다.

JavaScript와 HTML를 활용하여 간단한 Interactive Web 기능을 구현해 봤습니다.

포스팅 내용에 오류나 질문이 있다면 댓글 남겨주시면 감사드리겠습니다.

고맙습니다 :)

728x90

저작자표시