[HTML/HTML5] input 엘리먼트 : onchange 속성을 사용해 값 변경시 처리하기

icodebroker HTML5 2024-06-19

■ input 엘리먼트의 onchange 속성을 사용해 값 변경시 처리하는 방법을 보여준다.

▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onChange()
            {
                var value = document.getElementById("rangeInput").value;

                document.getElementById("valueSpan").innerHTML = value;
            }
        </script>
    </head>
    <body>
        <form>
            <p><input id="rangeInput" type="range" max="10" step="0.5" value="0" onchange="onChange();" /></p>
            <p><span id="valueSpan">0</span></p>
            <input type="submit" />
        </form>
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<head>

function onChange()

{

var value = document.getElementById("rangeInput").value;

document.getElementById("valueSpan").innerHTML = value;

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>