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

250x250

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

DATA101

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

저작자표시

'SW 개발 > Vanilla JS' 카테고리의 다른 글

[JavaScript] npm 모듈 재설치 방법(feat. 모듈 삭제 방법) (2)	2022.07.01
[JavaScript] 객체 병합 방법(Objet.assign 함수, 전개연산자) (0)	2021.12.03
[JavaScript] 배열 내 조건을 만족하는 원소 찾기(filter 함수) (0)	2021.12.02
[JavaScript] 배열 원소와 인덱스를 반복적으로 활용하는 함수(forEach, map 함수) (0)	2021.12.02
[JavaScript] 배열 내 최댓값, 최솟값 찾기(Math 객체 내 max, min 함수) (0)	2021.12.02

'SW 개발/Vanilla JS' Related Articles

DATA101

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

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

🔥 목표

예제

실습 코드

실행결과

'SW 개발 > Vanilla JS' 카테고리의 다른 글

티스토리툴바