클릭된 그림을 클릭순서대로 나열

 

<h1> 배열 실습 문제 3</h1>

    <br><br>

   문제5. 다음 보기의 그림을 클릭하면 그림이 사라지고 그림을 모두 클릭하면 클릭한 순서대로 그림이 나올수 있도록 만들어라.<br>

    (힌트 : 태그 자체를 가져올때에는 outerHTML을 사용하면 됨)<br>

    <fieldset>

        <style>

            .divss {

                float: left;

           

            }

        </style>

        <legend>보기</legend>

        <div id="div5">

            <div style="border:1px solid black; height:100px; width:100px;

            background-color:red;" class="divss" onclick="clickDiv('red')"

            id="red" ;></div>

            <div style="border:1px solid black; height:100px; width:100px; background-color:blue;" class="divss" onclick="clickDiv('blue')" id="blue" ;></div>

            <div style="border:1px solid black; height:100px; width:100px; background-color:green;" class="divss" onclick="clickDiv('green')" id="green" ;></div>

            <div style="border:1px solid black; height:100px; width:100px; background-color:pink;" class="divss" onclick="clickDiv('pink')" id="pink" ;></div>

            <div style="border:1px solid black; height:100px; width:100px; background-color:yellow;" class="divss" onclick="clickDiv('yellow')" id="yellow" ;></div>

        </div>

    </fieldset><br>

    <script>

        var noColor=[] ;      

        var count=0;

        function clickDiv(color){  

            console.log(color);

            var divTag=document.getElementById("div5");            

            switch(color){

                case 'red':

                    var colorBox1 = document.getElementById("red");

                    console.log(colorBox1);

                    noColor[count]=colorBox1.outerHTML;

                    count++;                      

                    colorBox1.remove();

                    console.log(noColor[count]);

                    break;

                       

                case 'blue':

                    var colorBox1 = document.getElementById("blue");

                    noColor[count]=colorBox1.outerHTML;

                    count++;

                    colorBox1.remove();

                    console.log(count);

                    break;

                           

                 case 'green':

                    var colorBox1 = document.getElementById("green");

                    noColor[count]=colorBox1.outerHTML;

                    count++;

                    colorBox1.remove();

                    console.log(count);

                    break;

                   

                case 'pink':

                    var colorBox1 = document.getElementById("pink");

                    noColor[count]=colorBox1.outerHTML;

                    count++;

                    colorBox1.remove();

                    console.log(count);

                    break;

               

                case 'yellow':

                    var colorBox1 = document.getElementById("yellow");

                    noColor[count]=colorBox1.outerHTML;

                     count++;

                    colorBox1.remove();

                    console.log(count);

                    break;

            }  

            console.log(noColor);

            if(count>=5){

                for(let i=0;i<count;i++);

                divTag.innerHTML=noColor;

             count=0;

            }          

         

        }

           

        </script>

</body>

</html>