<html>
<head>
<meta charset="UTF-9">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/chrome.png">
</head>
<body>
<p>1. 버튼을 누르면 Text 의 색상이 변한다</p>
<p>2. 색상은 빨 주 노 초 파 남 보 이다</p>
<p> 3.보라색 까지 왔을 때 클릭 하면 다시 빨강색으로 돌아와야 한다</p>
<h1 id="txt">글자 색상이 변경 됩니다. </h1> <!--id를 txt로 갖는 h1요소-->
<button id="btn">색상 변경</button><!--id를 txt로 갖는 h1요소-->
<!--id가 btn인 요소를 가져와
click이라는 event가 발생했을 때
id가 txt인 요소의 글자색을 바꾼다.-->
</body>
<script>
var colorArray = ['red','yellow','orange','green','blue','navy','purple'];
// text의 색상이 총 7가지의 색으로 순서대로 변경되어야 하므로
// 다양한 값을 순서를 정해 담을 수 있는 배열을 이용
var clickNumber = 0;
/* 클릭 했을 때 마다 colorArray의 담긴 순서대로 출력해야 하므로
인덱스로 사용하기 위해 변수 clickNumber를 선언 */
/* id가 btn인 요소를 가져와 eventListener를 이용하여
click event가 발생했을때 실행 될 함수를 생성함
이때 함수는 여러번 사용할 함수가 아니라 여기서만 사용 될 함수이므로
익명함수를 이용하여 바로 함수를 선언*/
document.getElementById('btn').addEventListener('click',function(){
/* 보라색까지 왔을 때 클릭하면 다시 빨강색으로 돌아가야 하므로
if문을 이용하여 배열의 크기만큼 clickNumber가 증가하면
다시 clickNumber에 0을 대입*/
if(clickNumber==colorArray.length){
clickNumber = 0;
}
/* 변수 txt에 id 값을 txt로 갖는 요소를 찾아와 넣고
이 요소의 스타일 중 글자색을 바꾸도록 하였다.
이때 바뀌는 색은 미리 선언한 colorArray 배열의 값 중 하나이다.
클릭할 때 마다 clickNumber을 1씩 증가시켜
배열의 값을 순서대로 적용할 수 있게 하였다.*/
document.getElementById('txt').style.color=colorArray[clickNumber];
clickNumber++;
});
</script>
</html>