script 2초마다 배경색 변경 배열 도와주세요.

Question

안녕하세요 형누나들현재 red, orange, green 배열로된 Acolor를 2초마다 배경색으로 지정해줘서 랜덤으로 출력을 합니다.근데 배열 red - orange - green 순서대로 출력을 하고싶은데, 2초마다 hello()를 불러오니, 반복문을 돌릴수가 없어요. 도와주세요 red - orange - green 순서대로 2초마다 출력이 가능하도록 ㅠㅠ BackGround Change hello

bAdmin · Accepted Answer

출력부분 질문인줄 알았네요.색순서대로 출력해주는건 아래처럼 해주시면 됩니다. var Acolor &#61; new Array('red', 'orange', 'green'); var Bcolor &#61; 0; function hello(){ var Ccolor &#61; Acolor[Bcolor&#43;&#43;]; document.body.style.background&#61;Ccolor; if(Bcolor >&#61; Acolor.length){ Bcolor &#61; 0; } return hello; } setInterval(hello() ,2000);

메로니에 · Answer

hello()안에서 반복문을 이용해서 색깔을 넣어둔 Array부터 돌려야 하는게 먼저 아닐까여??ㅎㅎ

bAdmin · Answer

bgColor은 아주 옛날 소스 라서 document.body 의 style 속성을 변경을 해주시고함수는 문자열이 아닌 객체형태로 넘겨주셔야해요. function hello(){ var Acolor &#61; new Array('red', 'orange', 'green'); var Bcolor &#61; Math.floor(Math.random() * Acolor.length); var Ccolor &#61; Acolor[Bcolor]; document.body.style.background&#61;Ccolor; } setInterval(hello,2000);

fireguy · Answer

var i&#61;0;var Acolor &#61; new Array('red','ogragne','green'); function hellow(){ // 배경색 출력 var color &#61; Acolor[i]; document.body.style.background &#61; color; i&#43;&#43;; if(i&#61;&#61;2){ i &#61; 0; } }

ee32321 · Answer

function hello(){ var Acolor &#61; new Array('red', 'orange', 'green'); var Bcolor &#61; Math.floor(Math.random() * Acolor.length); var Ccolor &#61; Acolor[Bcolor]; document.bgColor&#61;Ccolor; } setInterval(&#34;hello()&#34;,2000); 이 부분을 함수로 만들어서 body에 onload시키면 될겁니다.참고해 주세요.https://www.w3schools.com/js/tryit.asp?filename&#61;tryjs_timing_clock

GB · Answer

형누나들 감사합니다. body로 Acolor 배열순서대로 출력에 성공하였습니다.근데, 추가적으로 이번엔 div영역에 백그라운드로 적용을 해보려했는데,Uncaught TypeError: Cannot set property 'cssText' of undefined at hello (C.html:13) at :1:1이런 오류가 발생하네요.

background color

logo.style.cssText='background-color:Ccolor'; 부분이 잘못됬나요?

ee32321 · Answer

https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp위의 링크 참고해보세요. 명령어가 잘못된 것 같아요. logo.style.cssText로 불러오는게 아니라,logo.style.backgroundcolor &#61; &#34;red&#34;;이런 식으로 불러야하는 것 같습니다.

GB · Answer

넵 body 전체로 불러올땐 document.body.style.background&#61;Ccolor; 이렇게 불러왔는데,id나 class로 받아올때도 그렇게 받아올 수 있는건가요??

ee32321 · Answer

이 공식을 통해서, document.object.style.background&#61;Ccolor; 예를 들면,var id_abc &#61; document.getElementById(&#34;abc&#34;); var class_def &#61; document.getElementByClassName(&#34;def&#34;); document.id_abc.style.background&#61;Ccolor; document.class_def.style.backgroune&#61;Ccloor; 이렇게 하면 될 것 같네요.

GB · Answer

흠 무엇이 문제인지.. Uncaught TypeError: Cannot read property 'style' of undefined at hello (C.html:26) at <anonymous>:1:1

ee32321 · Answer

테스트해본 결과 var변수로 저장한 후에, document를 빼야하는 군요. var id_abc &#61; document.getElementById(&#34;abc&#34;); var class_def &#61; document.getElementByClassName(&#34;def&#34;); id_abc.style.background&#61;Ccolor; class_def.style.backgroune&#61;Ccloor;

GB · Answer

var class_def &#61; document.getElementsByClassName(&#34;logo&#34;); class_def.style.background&#61;Ccolor; Uncaught TypeError: Cannot set property 'background' of undefined at hello (C.html:26) at <anonymous>:1:1 계속 background undefined 뜨네요 흠...

ee32321 · Answer

var class_def &#61; document.getElementsByClassName(&#34;logo&#34;); class_def.style.background&#61;Ccolor; class_def.style.background&#61;&#34;red&#34;; Cclolor을 색상명으로 줘야하는 것 같습니다. 여기 참고해 보세요. https://www.w3schools.com/tags/att_body_bgcolor.asp hex_number를 주는 방법도 있네요.

GB · Answer

네 그렇긴한데,이미 다해봤을때 마찬가지로 백그라운드 언디파인 오류가..(클래스명)변수.style.background&#61;색상;부분이 틀린것 같아요 ㅠㅠ

ee32321 · Answer

document.body.style.backgroundColor &#61; &#34;red&#34;;background가 아니라, backgroundColor이군요. 구문을 잘못적었었네요. 참고해 주세요.

GB · Answer

document.body.style.background&#61;Ccolor;기존에 background로 했을때 body에 출력이 잘됬었는데 ㅠㅠbackgroundColor로 해도 역시나.. 마찬가지네요;;

ee32321 · Answer

background color

완성을 해봤습니다.getElementsClassByName으로 찾는 경우, 리턴값이 복수입니다. getElementById의 경우에는 1개의 값이 되겠죠. 그래서, 여기서는 id를 주고 했네요. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementByIdhttps://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName위에 관련 API가 있으니, 참고해보세요. 답글을 달다보니, 글이 길어졌네요. 분명, 테스트에서는 잘 되었는데, 너무 성급하게 적다보니까, 알게 모르게 글 적을 때에 실수. 복사, 붙여넣기할 때 잘못붙여 넣은 부분들, 오타들이 있어서 소통이 잘 안되었던 것 같네요.

script 2초마다 배경색 변경 배열 도와주세요.

17개의 답변

Q&A 목록