Showing
1 changed file
with
34 additions
and
42 deletions
... | @@ -4,10 +4,38 @@ | ... | @@ -4,10 +4,38 @@ |
4 | <title>KHU KHU Chat</title> | 4 | <title>KHU KHU Chat</title> |
5 | <meta charset="utf-8"> | 5 | <meta charset="utf-8"> |
6 | <link rel="stylesheet" href="style.css"> | 6 | <link rel="stylesheet" href="style.css"> |
7 | -<style> | 7 | +<script> |
8 | - | 8 | +function nightDayHandler(self){ |
9 | -</style> | 9 | + var target=document.querySelector('body'); |
10 | + if(this.value==='night') | ||
11 | + { | ||
12 | + target.style.backgroundColor= 'black'; | ||
13 | + target.style.color= 'white'; | ||
14 | + this.value= 'day'; | ||
15 | + | ||
16 | + var alist=document.querySelectorAll('a'); | ||
17 | + var i =0; | ||
18 | + while(i<alist.length) | ||
19 | + { | ||
20 | + alist[i].style.color='powderblue'; | ||
21 | + i+=1; | ||
22 | + } | ||
23 | + }else{ | ||
24 | + target.style.backgroundColor= 'white'; | ||
25 | + target.style.color= 'black'; | ||
26 | + this.value= 'night'; | ||
27 | + | ||
28 | + var alist=document.querySelectorAll('a'); | ||
29 | + var i =0; | ||
30 | + while(i<alist.length) | ||
31 | + { | ||
32 | + alist[i].style.color='blue'; | ||
33 | + i+=1; | ||
34 | + } | ||
35 | + } | ||
36 | +} | ||
10 | 37 | ||
38 | +</script> | ||
11 | </head> | 39 | </head> |
12 | <body> | 40 | <body> |
13 | 41 | ||
... | @@ -85,48 +113,12 @@ i+=1; | ... | @@ -85,48 +113,12 @@ i+=1; |
85 | 113 | ||
86 | <!-- button 1 usage array and Loop for chage style --> | 114 | <!-- button 1 usage array and Loop for chage style --> |
87 | <input id="night_day" type="button" value="night" onclick=" | 115 | <input id="night_day" type="button" value="night" onclick=" |
88 | -var target=document.querySelector('body'); | 116 | + nightDayHandler(this); |
89 | -if(document.querySelector('#night_day').value==='night') | ||
90 | -{ | ||
91 | - target.style.backgroundColor= 'black'; | ||
92 | - target.style.color= 'white'; | ||
93 | - document.querySelector('#night_day').value= 'day'; | ||
94 | - | ||
95 | - var alist=document.querySelectorAll('a'); | ||
96 | - var i =0; | ||
97 | - while(i<alist.length) | ||
98 | - { | ||
99 | - alist[i].style.color='powderblue'; | ||
100 | - i+=1; | ||
101 | - } | ||
102 | -}else{ | ||
103 | - target.style.backgroundColor= 'white'; | ||
104 | - target.style.color= 'black'; | ||
105 | - document.querySelector('#night_day').value= 'night'; | ||
106 | - | ||
107 | - var alist=document.querySelectorAll('a'); | ||
108 | - var i =0; | ||
109 | - while(i<alist.length) | ||
110 | - { | ||
111 | - alist[i].style.color='blue'; | ||
112 | - i+=1; | ||
113 | - } | ||
114 | -} | ||
115 | "> | 117 | "> |
116 | 118 | ||
117 | -<!-- button2 --> | 119 | +<!-- button2 making and using function --> |
118 | <input id="night_day" type="button" value="night" onclick=" | 120 | <input id="night_day" type="button" value="night" onclick=" |
119 | - var target=document.querySelector('body'); | 121 | + nightDayHandler(this); |
120 | - if(this.value==='night') | ||
121 | - { | ||
122 | - target.style.backgroundColor= 'black'; | ||
123 | - target.style.color= 'white'; | ||
124 | - this.value= 'day'; | ||
125 | - }else{ | ||
126 | - target.style.backgroundColor= 'white'; | ||
127 | - target.style.color= 'black'; | ||
128 | - this.value= 'night'; | ||
129 | - } | ||
130 | "> | 122 | "> |
131 | 123 | ||
132 | <div id="grid"> | 124 | <div id="grid"> | ... | ... |
-
Please register or login to post a comment