디지털 컨버전스/Java Script

[Javascript] 배열 예제

gimyeondong 2020. 4. 13. 17:39 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <fieldset>
            <legend>Fruits</legend>
            <div id="screen">

            </div>


        </fieldset>
        <input id="txt1" type="text" placeholder="앞에 추가할 값">
        <input id="unshift" type="button" value="앞쪽에 추가">
        <input id="shift" type="button" value="앞에서 삭제">
        <br>
        <input id="txt2" type="text" placeholder="뒤에 추가할 값">
        <input id="push" type="button" value="뒷쪽에 추가">
        <input id="pop" type="button" value="뒤에서 삭제">

        <script>

            var arr = ["Apple","Orange","Tomato","Banana","Grape","Test"];
            document.getElementById("screen").innerHTML	 = arr;

            document.getElementById("unshift").onclick	 = function(){
                arr.unshift(document.getElementById("txt1").value);
                document.getElementById("screen").innerHTML	 = arr;
            };
            document.getElementById("shift").onclick	 = function(){
                arr.shift();
                document.getElementById("screen").innerHTML	 = arr;
            };
            document.getElementById("push").onclick	 = function(){
                arr.push(document.getElementById("txt2").value);
                document.getElementById("screen").innerHTML	 = arr;
            };
            document.getElementById("pop").onclick	 = function(){
                arr.pop();
                document.getElementById("screen").innerHTML	 = arr;
            };

        </script>
    </body>
</html>