분명히 야간 모드에서 잘 작동해서 코드 복사해서 else 뒤에 있는 주간 모드에 붙여 넣기해서 색깔만 바꿔서 브라우저에서 해보니 주간/야간 모드가 작동하질 않았다. 한 5분 정도 헤매다가 발견한 문제의 원인은 바로 코드를 복사할 때 닫는 중괄호( } )까지 복사하지 않아서 작동하질 않았던 거였다. 하하하.
The NodeList object returned by the querySelectorAll() method must be static, not live ([DOM-LEVEL-3-CORE], section 1.1.1). Subsequent changes to the structure of the underlying document must not be reflected in the NodeList object. This means that the object will instead contain a list of matching Element nodes that were in the document at the time the list was created.
사용자가 버튼을 클릭할때 onclick= 에 있는 내용이 실행되죠. 그래서 if 또는 else 에 맞는 구문이 실행되고 나면 변수는 전부 없어집니다. 다음번 클릭때 다시 생성되는거죠.
코드를 단순하게 하기 위해서는 중복되는 부분을 if/else 문 밖으로 빼면 됩니다.
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
var alist = document.querySelectorAll('a'); // 이부분을 if/else문 앞으로 뺐습니다.
var i = 0; // 이부분을 if/else문 앞으로 뺐습니다.
여기에서는 색을 다시 blue로 바꾸기위해서 else문에도 선언을 해준거에요.
else문에 따로 alist blue컬러를 선언해주지 않는다면 한번 실행된 if문에서의 powederblue컬러가 변하지 않거든요.
night에서 day로 변했을때 powderblue에서 color색상을 변화시키지 않을거라면 if문에만 선언해주면 됩니다.