버튼을 누르면 글자 색상이 '빨->주->노->초->파->남->보' 순서로 변경되는 코드짜기
<body>
<!--버튼을 누르면 글자 색상이 '빨->주->노->초->파->남->보' 순서로 변경되는 코드입니다.-->
<!--마지막 순서인 보라색이 되면 다시 빨강으로 돌아옵니다.-->
<p>버튼을 누르면 글자 색상이 변경된다</p>
<p>빨->주->노->초->파->남->보</p>
<p>보라색에서 다시 클릭하면 빨강으로 되돌아 온다</p>
<!--먼저 id가 "txt"인 h1태그와-->
<h1 id="txt">글자 색상이 변경됩니다</h1>
<!--색상변경을 해줄 button을 만들어줍니다.-->
<button id="btn">색상변경</button> <!--onclick="cc()"-->
</body>
<script>
//색상을 차례대로 변경할 수 있도록 배열로 담아주었고
var colorList = ['red','orange','yellow','green','blue','navy','purple'];
//버튼 클릭 수를 담을 수 있는 변수 i를 선언했습니다.
var i = 0;
//'btn'을 아이디로 가진 버튼태그를 가져와 addEventListener로 버튼을 클릭할 경우 다음 기능을 실행하도록 설정해줍니다.
document.getElementById('btn').addEventListener('click',function(){
//익명함수를 사용하는 이유는 이 함수를 다른 곳에서는 사용하지 않을 것이기 때문입니다.
//우선 글자색이 보라색에서 다시 빨강색이 될 수 있도록 i의 값이 colorList배열의 길이와 같아지면 0으로 초기화할 수 있도록 if문을 작성해줍니다.
if(i == colorList.length){
i = 0;
}
//console.log(i);
//i가 colorList배열의 인덱스 값 이하이면 h1태그의 글자색상이 colorList배열의 [i]값의 색상으로 변경되도록 지정해줍니다.
document.getElementById('txt').style.color = colorList[i];
//이벤트가 한번 발생할 때 마다 i를 증가시켜줌으로 다음 배열로 넘어갈 수 있도록 합니다.
i++;
});
//i가 colorList배열의 인덱스 값과 같아지면 마지막으로 색상을 보라색으로 변경시켜준 후 if문에 의해 다시 0으로 초기화됩니다.
