1
2
3
4
5
6
7
8
9
10
11
12
    <input id="night_day" type="button" name="" value="night" onclick="
    if (document.querySelector('#night_day').value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black'; 
        document.querySelector('body').style.color = 'white';
        document.querySelector('#night_day').value = 'day';
    }else{
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';    
        document.querySelector('#night_day').value = 'night';
    }
    "> 
cs



리팩토링 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
    <input type="button" name="" value="night" onclick="
    var target = document.querySelector('body');
    if (this.value === 'night'){
        target.style.backgroundColor = 'black'; 
        target.style.color = 'white';
        this.value = 'day';
    }else{
        target.style.backgroundColor = 'white';
        target.style.color = 'black';    
        this.value = 'night';
    }
    "> 
cs




최종본

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		function nightDayHandler(self){
			var target = document.querySelector('body');
			if (self.value === 'night'){
				target.style.backgroundColor = 'black'; 
				target.style.color = 'white';
				self.value = 'day';
				var alist = document.querySelectorAll('a');
				var i = 0;
				while(i < alist.length){
					alist[i].style.color = 'pow derblue';
					i++;
				}
			}else{
				target.style.backgroundColor = 'white';
				target.style.color = 'black';	
				self.value = 'night';
				var alist = document.querySelectorAll('a');
				var i = 0;
				while(i < alist.length){
					alist[i].style.color = 'blue';
					i++;
				}
			}
		}
	</script>
</head>
<body>
	<h1>WEB</h1>
		
	<input type="button" name="" value="night" onclick="nightDayHandler(this)"> 
	<ol>
		<li><a href="1.html">HTML</a></li>
		<li><a href="2.html">CSS</a></li>
		<li><a href="3.html">JAVASCRIPT</a></li>
	</ol>
	<h2>JavaScript</h2>
	<p>이상이 그러므로 인류의 있는 그러므로 열매를 그리하였는가? 소금이라 안고, 눈에 무엇을 같이, 것이다. 작고 붙잡아 미인을 속에서 스며들어 새 말이다. 있으며, 광야에서 것이 더운지라 봄바람이다. 같이, 싹이 청춘의 예수는 돋고, 있는 철환하였는가? 속잎나고, 인생을 그들의 타오르고 피가 있는가? 살 몸이 하는 속잎나고, 끓는다. 듣기만 이상이 노년에게서 바이며, 품에 커다란 일월과 위하여서, 봄바람이다. 시들어 이성은 만천하의 별과 못할 바이며, 끓는 때문이다. 피가 기쁘며, 우리 황금시대의 철환하였는가?
관현악이며, 눈이 갑 철환하였는가? 위하여 있을 싶이 싸인 없으면, 봄바람을 사막이다. 무엇을 아니더면, 피가 스며들어 산야에 바이며, 그들의 청춘에서만 있는가? 얼음에 영원히 무엇을 열락의 노래하며 그들의 있음으로써 싶이 우리 있다. 얼음 사랑의 얼음에 할지니, 가는 되는 것이다. 그들의 품고 더운지라 속잎나고, 교향악이다. 새가 대한 곳으로 힘차게 생명을 실로 붙잡아 것은 영원히 뿐이다. 새 목숨을 가장 보는 부패뿐이다. 바이며, 할지니, 우리 품에 위하여서 있는 이상의 불러 고동을 이것이다. 얼마나 있는 하는 옷을 인간이 과실이 아름다우냐? 이상의 새 피가 힘차게 있음으로써 꾸며 꽃 우리 싸인 말이다.
피에 물방아 싸인 수 날카로우나 끝에 스며들어 그들에게 사막이다. 그와 피에 가치를 이성은 얼마나 얼마나 사막이다. 산야에 청춘 듣기만 이상, 있는 바로 얼마나 만천하의 천하를 아름다우냐? 없으면 이 있는 부패뿐이다. 우리의 아름답고 이상의 끝에 듣는다. 맺어, 가치를 역사를 생명을 그들은 모래뿐일 새 보이는 것이다. 희망의 행복스럽고 사람은 황금시대다. 하는 수 옷을 동력은 못할 지혜는 때문이다. 되는 것은 풀이 그림자는 아름다우냐? 많이 튼튼하며, 청춘의 생명을 길지 교향악이다.</p>
</body>
</html>


저작자표시

'JavaScript' 카테고리의 다른 글

배열만들고 데이터넣고 꺼내기  (0) 2019.05.25
객체만들기  (0) 2019.05.23
배열과 반복문  (0) 2019.05.22
반복문  (0) 2019.05.22
배열 만들고 가져오기 기초  (0) 2019.05.22

+ Recent posts

티스토리툴바