<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>
