질문 있습니다~!

Question

안녕하세요! 수업 너무 잘들었습니다~ 코딩일레븐님께 배운 코드를 사용하려고 하는데 window.onload가 중복으로 사용하면 최하단에 있는것만 실행이 되더라고요 ㅠ 구글링 해도 제가 js 이해가 짧아서 안되네요;;; 해당 강의에서 배운 스크롤바에 앞선 강의에서 배운 커서와 버튼 효과도 같이 주려면 어떻게 해야하나요? 바쁘시겠지만 문의 드리겠습니다~항상 감사합니다!

kkangfly1 · Answer

정말 감사합니다!! 감사합니다~오늘 하루도 즐거운 하루 되세욥!!!!!

coding11 · Answer

let btn;

let cursorItem;

let circle;

let x=0, y = 0;

let mx=0, my = 0;

let scrollTop = 0;

let bar;

window.onload = function(){

function first(){

btn = document.querySelector(".btn");

cursorItem = document.querySelector(".cursorItem");

circle = cursorItem.querySelector(".circle");

btn.addEventListener("mouseover", function(e){

circle.style.transform = "scale(.3)";

})

btn.addEventListener("mouseout", function(e){

circle.style.transform = "scale(1)";

})

window.addEventListener("mousemove", function(e){

x = e.clientX;

y = e.clientY;

});

loop();

}

function second() {

bar = document.getElementsByClassName("bar")[0];

window.addEventListener("scroll", function(e){

scrollTop = document.documentElement.scrollTop;

let per = Math.round((scrollTop / (document.documentElement.scrollHeight - window.innerHeight)) * 100);

bar.style.height = per + "%";

}, false)

}

function loop(){

mx += (x - mx ) * .09;

my += (y - my ) * .09;

cursorItem.style.transform = "translate("+ mx +"px, "+ my + "px )";

requestAnimationFrame(loop);

}

kkangfly1 · Answer

진짜 죄송한데요 제가 이렇게 하기처럼 코드를 짰는데요 혹시 봐주실 수 있을까요? let   btn ; let   cursorItem ; let   circle ; let   x = 0 ,  y  =  0 ; let   mx = 0 ,  my  =  0 ; let   scrollTop  =  0 ; let   bar ; window . onload  =  function (){      function   first (){      btn  =  document . querySelector ( ".btn" );      cursorItem  =  document . querySelector ( ".cursorItem" );      circle  =  cursorItem . querySelector ( ".circle" );              btn . addEventListener ( "mouseover" ,  function ( e ){          circle . style . transform  =  "scale(.3)" ;     })      btn . addEventListener ( "mouseout" ,  function ( e ){          circle . style . transform  =  "scale(1)" ;     })      window . addEventListener ( "mousemove" ,  function ( e ){          x  =  e . clientX ;          y  =  e . clientY ;              });           loop (); }      function   second () {          bar  =  document . getElementsByClassName ( "bar" )[ 0 ];                  window . addEventListener ( "scroll" ,  function ( e ){          scrollTop  =  document . documentElement . scrollTop ;          let   per  =  Math . round (( scrollTop  / ( document . documentElement . scrollHeight  -  window . innerHeight )) *  100 );                   bar . style . height  =  per  +  "%" ;     },  false ) } } function   loop (){      mx  += ( x  -  mx  ) *  .09 ;      my  += ( y  -  my  ) *  .09 ;       cursorItem . style . transform  =  "translate(" +  mx  + "px, " +  my  +  "px )" ;      requestAnimationFrame ( loop ); }

kkangfly1 · Answer

빠른 답변 감사합니다~!  근데 진짜 죄송한데요 이해가 안되요 ㅠ  이게 loop문은 하기에 안들거야 하는건가요?? window.onload = function(){ 버튼 이벤트 스크롤이벤트 등등등 전부 여기에 넣으면 됩니다. }

coding11 · Answer

아 맞습니다. onload 중복 사용이 안 됩니다. 이벤트를 거는 부분은 전부 onload 안에 넣으시면 됩니다. 페이지가 로드가 되어야 버튼 이벤트 같은 것을 줄 수 있거든요. 각 강의에서 onload 안에 들어 있는 스크립트들을 모아 놓고 사용해도 됩니다. onload 밖에 있는 함수들도 마찮가지고요.  let 변수 1; let 변수2; window.onload = function(){ 버튼 이벤트 스크롤이벤트 등등등 전부 여기에 넣으면 됩니다. } function 함수1(){ } function 함수2(){ } function 함수3(){ } 혹시 이해가 안되시면 댓글 달아주세요.