소스코드
Coding Everybody
댓글
-
220810 배열 반목문의 활용 완료 -
2022.08.02 -
22.07.27
-
220724_
-
0712
-
220709 완료
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length)
{
alist[i].style.color='powderblue';
i = i + 1;
} -
220703 오후 7시 11분 완료
-
2022.06.26
-
220615
-
220614
-
220607
-
22.05.23
-
220519
-
220518
-
분명히 야간 모드에서 잘 작동해서 코드 복사해서 else 뒤에 있는 주간 모드에 붙여 넣기해서 색깔만 바꿔서 브라우저에서 해보니 주간/야간 모드가 작동하질 않았다. 한 5분 정도 헤매다가 발견한 문제의 원인은 바로 코드를 복사할 때 닫는 중괄호( } )까지 복사하지 않아서 작동하질 않았던 거였다. 하하하.
-
220424
-
220406
-
220405
-
2022.04.03
-
2022.03.30
-
버튼을 위 아래 두개 만들어 놓고
코드는 아래꺼만 수정함
그래놓고 위쪽 버튼 계속 눌러도 안바껴서 눈빠지게 찾았는데
알고 보니 아래쪽 버튼 정상 작동...ㅋㅋㅋㅋㅋㅋ -
2022.03.15 재수강 필수
-
20220315
-
저도 궁금해서 구글링 해봤는데 이렇게 나오네요! 참고하시면 될 것 같아요!!
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. -
2022.02.24 완료
-
단순히 배열과 반복문을 사용하지 않고 버튼에 document.querySelectorAll('a').style.color = 'powderblue'; 를 추가하면 되지 않을까 생각했는데 안되더군요...
document.querySelector('a').style.color = 'powderblue'를 할 경우에는 첫번째 태그에만 적용이 되었는데, querySelectorAll('a')은 왜 안되는지 알 수 있을까요? 콘솔을 통해서 보아도 문제의 원인을 모르겠네요
단순히 링크색상을 바꾸려면 document.linkColor = 'red';을 쓰면 되지만
querySelectorAll의 명령은 왜 안되었는지 궁금합니다. -
2022.02.17. WEB2 - JavaScript - 배열과 반복문의 활용 파트 수강완료 -
2022.02.13
-
와,, 존경합니다 리팩토링을 어떻게 해야할지 고민했는데 와,,,
-
2022-02-10 완료
-
2022.02.04
-
20220126
-
2022-01-22 감사합니다 ~~
-
2022-01-21 완료
-
22.10.20 감사합니다!
-
220117 감사합니다
-
이번회에서 배운 배열을 이용해보면 좀더 쉬울것 같습니다.
<input id="night_day" type="button" value="night" onclick="
// 변수는 if/else문 앞에 미리 지정합니다.
var target = document.querySelector('body');
var alist = document.querySelectorAll('a');
var i = 0;
// if/else문에서는 변수에 배경색,글자색,버튼내용,링크색을 지정합니다.
if(this.value === 'night'){
// 배경색,글자색,버튼내용,링크색
var pageStyle = ['black', 'white', 'day', 'powderblue'];
} else {
// 배경색,글자색,버튼내용,링크색
var pageStyle = ['white', 'black', 'night', 'blue'];
}
// if/else문 밖에서 변수값으로 실제 스타일을 지정합니다.
target.style.backgroundColor = pageStyle[0];
target.style.color = pageStyle[1];
this.value = pageStyle[2];
while(i < alist.length){
alist[i].style.color = pageStyle[3];
i = i + 1;
}
"> -
질문의 의도와 다른 답인것 같아 내용 추가해봅니다.
alist를 else문에도 또 선언하는 이유가 있느냐 는게 요지인데 아래 문장이 if문에도 있는데 else문에도 있어서 그런거죠.
var alist = document.querySelectorAll('a');
이 자바스크립트 코드는 메모리에 상주해 있는게 아닙니다.
참고 : https://developer.mozilla.org......ent
사용자가 버튼을 클릭할때 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문 앞으로 뺐습니다.
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
"> -
220103 완료 감사합니다.
-
21.12.28 완료
-
2021-12-23
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
">
<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> -
2021-12-19 완료
고맙습니다. -
완료...계속 정주행
-
오후 2:31 2021-12-14
-
21.12.5 완료
-
21.11.23
-
감사합니다.
-
완료
-
21-10-30. 3타.
-
21-10-28. 2타.
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
