MinsoftK

test making and using function

...@@ -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">
......