버튼을 클릭하면 while 반복문을 사용해 글자색이 바뀌도록 설정할 수 있습니다.
예시를 테스트하기 위해 아래와 같이 코드를 작성합니다. title은 Loop&Array Sample로 하였습니다. utf-8 인코딩을 입력하고 <body> 태그에 버튼을 만들겠습니다. <input> 태그를 이용해 버튼을 만들고 id를 transfer라고 지정해놓겠습니다. 버튼의 값으로는 night를 넣었습니다. onclick 속성을 추가합니다. 버튼을 눌렀을 때 자바스크립트 명령이 실행됩니다. texts라는 변수를 선언합니다. document.querySelector는 괄호 ( )에 적힌 값들 중 첫 번째 값 한 개를 지정합니다.
이제 if 조건문을 작성합니다. this.value 키워드를 통해 현재 태그의 value값을 불러와서 동등 비교 연산자 === 를 이용해 'night'와 대조합니다. 두 값이 같을 때 true 값이 적용되어 { } 중괄호 안의 명령이 실행됩니다. texts 변수에 style을 적용합니다. 배경색은 navy, 글자색은 yellow로 적용합니다. night였던 값은 day로 변경됩니다.
한번 더 버튼을 클릭해보겠습니다. onclick 이후부터 명령이 실행됩니다. if 조건문에서 변경된 value 값 day를 불러와 동등 비교 연산자 === 을 사용해 night와 비교합니다. 둘은 일치하지 않기에 false 값이 출력되고 if 이후 { } 안의 값은 무시되고 else 이후 { } 안의 내용이 적용됩니다. 변수 texts에 스타일을 적용합니다. 배경색은 skyblue, 글자색은 purple, day였던 값 value는 night로 변경됩니다.
<! DOCTYPE>
<html>
<head>
<title> Loop&Array Sample </title>
<meta charset = "utf-8">
</head>
<body>
<input id="transfer" type="button" value="night" onclick="
var texts = document.querySelector('body');
if(this.value === 'night'){
texts.style.backgroundColor = 'navy';
texts.style.color = 'yellow';
this.value = 'day';
}
else {
texts.style.backgroundColor = 'skyblue';
texts.style.color = 'purple';
this.value = 'night';
}
">
<ul>
<li> airplane </li>
<li> boats </li>
<li> cars </li>
</ul>
</body>
</html>
변수를 선언하고 조건문을 사용해 리스트 airplane, boats, cars에 서식을 적용하겠습니다.
night 버튼을 클릭하면, 글자색이 red로 변하게 만들겠습니다. 변수를 change라고 선언하고 li 태그 모두를 불러오는 명령을 만듭니다. querySelectorAll은 값을 모두 가져와 배열의 형태로 출력합니다. 반복 횟수를 관리하기 위해 변수 i=0; 을 선언합니다. while 반복문을 사용해 i가 변수 change안에 있는 값의 개수보다 적을 때 반복이 종료되도록 설정합니다. while의 조건이 true일 때 change변수의 배열 중 i와 동일한 인덱스(0), 즉 첫 번째 값을 불러와서 글자색을 red로 변경합니다. 한번 반복할 때마다 i에 1을 더한 값이 i의 새로운 값으로 변경되도록 코드를 작성합니다. 이 코드를 if 구문 아래에 붙여 넣습니다.
var change = document.querySelectorAll('li');
var i = 0;
while(i <change.length){
change [i]. style.color = 'red';
i= i +1;
}
day 버튼을 클릭하면, 글자색이 green으로 변하게 만들겠습니다. 위 코드에 red를 white로 바꾸고 else 부분 아래에 붙여 넣습니다.
'코딩' 카테고리의 다른 글
| 자바스크립트 객체 object 에 값 넣는 방법과 가져오는 방법, 반복문으로 객체의 값 모두 가져오는 방법 (0) | 2020.09.15 |
|---|---|
| 자바스크립트 함수 Function, 매개변수 Parameter, 인자 Argument, 반환 Return (0) | 2020.09.11 |
| 자바스크립트 JavaScript 배열 array 이용해 반복문 Loop 만들기 (0) | 2020.09.10 |
| 자바스크립트 JavaScript 반복문을 위한 while , var 변수 i = 0 선언 (0) | 2020.09.09 |
| 자바스크립트 JavaScript 배열 array 만들기, 값 불러오기, 값 개수 세기, 값 추가하기 (0) | 2020.09.08 |
댓글