본문 바로가기

IT프로그래밍

스크립트 버튼 동작

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script>

        window.onload = function () {

            var buttonA = document.getElementById('button-a');

            var buttonB = document.getElementById('button-b');

            var counterA = document.getElementById('counter-a');

            var counterB = document.getElementById('counter-b');

 

            buttonA.onclick = function () {

                counterA.innerHTML = Number(counterA.innerHTML) + 1;

            };

 

            buttonB.onclick = function () {

                counterB.innerHTML = Number(counterB.innerHTML) + 1;

            };

        };

        /*  시계

        window.onload = function () {

            var clock = document.getElementById('clock');

 

            setInterval(function () {

                clock.innerHTML = new Date().toString();

            }, 1000);

        };

        */

    </script>

    <meta charset="utf-8" />

    <title>Click</title>

</head>

<body>

    <button id ="button-a">ButtonA</button>

    <input type="button" name="button-b" value=" ButtonB" id="button-b"/>

    <h1>Button A - <span id="counter-a">0</span></h1>

    <h1>Button B - <span id="counter-b">0</span></h1>

</body>

</html>


스크립트 안에서 버튼의 id로 스크립트 변수와 연결 한 후, 버튼을 누르게 되면 onclick을 호출

숫자를 +1씩 증가시킨다.