PROJECT 01 >>>
버튼을 클릭하면 html파일의 배경색이 바뀌도록 설정하기!
<!--
학원에서 배웠던 내용인데도 불구하고 혼자 코드를 짜려하니 계속 에러가 떠서 어려웠다.
에러 구글링한다고 한 네시간은걸렸다...ㅋㅋㅋㅋ
버튼 태그에서 함수를 연결할 때에는 마지막에 세미콜론을 붙이지 않는다.
자바스크립트에서 데이터를 배열에 저장할때는 [ ] 괄호를 사용한다.
자바에서는 { } 를 사용한다는 점에서 다르다.
강의를 들을 때는 당연히 넘어가게 되는 이렇게 작은 부분들은 확실히 혼자 해보면서 각인이 되는 듯하다.
-->
# 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PROJECT01</title>
<script type="text/javascript">
// 1) 배경색상을 배열에 저장함.
var bgColors = ["red", "yellow", "green", "blue"];
var i =0;
// 2) 버튼의 클릭이벤트로 연결해둔 함수를 생성한다.
function changeColor(){
// 3) 바디태그의 아이디를 불러와 배열의 인덱스에 저장된 색상을 바디의 스타일속성에 적용시킨다.
var bodyTag = document.getElementById("body");
bodyTag.style.backgroundColor = bgColors[i];
i++;
// 4) i는 배열의 크키를 넘어서 계속 1씩증가하므로, 배열의 끝에서 처음으로 초기화시킨다.
if (i>=bgColors.length) {
i = 0;
}
}
</script>
</head>
<body id="body">
<h2>Change Background Color</h2>
<!-- 1) 버튼생성 및 클릭이벤트에 함수를 연결한다.-->
<button onclick="changeColor()" >Click Me!</button>
</body>
</html># 프로젝트 출처
Change Background Color JavaScript Project - JSBeginners
Hosted Project https://js-beginners.github.io/project_change_color_background/ Github Source Files https://github.com/JS-Beginners/project_change_color_background This background color changing app was short and sweet to complete. Since I was given the HTM
jsbeginners.com
'MINI PROJECT > JavaScript' 카테고리의 다른 글
| 대출계산기 (0) | 2021.09.05 |
|---|---|
| 명언제조기 (0) | 2021.08.22 |
| 공포의 쿵쿵따게임! (0) | 2021.08.18 |
| 끝말잇기 게임을 만들었다. (0) | 2021.08.18 |
| 무작위로 HEX 코드를 생성해 배경색으로 설정하기 (0) | 2021.08.16 |
댓글