kda
21
2021-01-19 20:14:08 작성 2021-01-19 20:26:24 수정됨
3
165

js 슬라이더 문제 입니다. 도와주세요


<script>

    var img=document.getElementById("slide");
    var imageArrey=["img/slid.png","img/slid1.png","img/slid3.png","img/emslogo%20(1).png"];
    var imageIndex=0;
    
    function changeImage(){
img.setAttribute("src",imageArrey[imageIndex]);
        imageIndex++;
    if(imageIndex>=imageArrey.length){
            imageIndex=0;
                
        }
        
    }
    setInterval(changeImage,1000);

    </script>

---------------------------------------------------

html

    <div class="main">
            <ul>
        <li><img src="img/slid.png" alt="#" width="650" id="slide"></li>
        <li><img src="img/slid1.png" alt="" width="650"></li>
        <li><img src="img/slid3.png" alt="#" width="650"  ></li>
        <li><img src="img/emslogo%20(1).png" alt="#" width="650"></li>
    
       </ul>

 

요렇게 코드를 짯는데 슬라이드가 실행이 안되고 : Cannot read property 'setAttribute' of null
    at changeImage라고 에러만 뜹니다.

오타도 꼼꼼히 찾아 봤는데 딱히 발견된 오타는 없습니다.

하물며 id를 img안에도 주기도 했고 ul에도 주기도 했으나 같은 현상이 반복 됩니다.

이유가 뭘까요... 아니면 다른 방식으로 코드를 짜는게 있으면 알려주세요 ㅠ

아직 혼자 자바스크립트를 배워나가는 단계인데 너무 어렵네요.


콘솔창에서는 작동이 됩니다..

이미지가 슬라이드로 움직이질 않아 질문을 남기게 되었습니다.


혹시나 해서

window.onload function(){

var img=document.getElementById("slide");

var imageArrey=["img/slid.png","img/slid1.png","img/slid3.png","img/emslogo%20(1).png"];

var imageIndex=0;

function changeImage(){

console.log("win");

img.setAttribute("src",imageArrey[imageIndex]);

imageIndex++;

if(imageIndex>=imageArrey.length){

imageIndex=0;

}

}

setInterval(changeImage,1000);

};

으로도 풀어서 확인 했는데.. FUNCTION에 대한 오류만 뜨고 콘솔이 작동이 안됩니다 울고싶네요 ㅠ


0
  • 답변 3

  • 킁킁탐정
    826
    2021-01-19 20:28:06

    에러 메시지가 이야기하는바는 var img = document.getElementById("slide"); 이 코드의 실행 결과가

    정상적이지 않은 null 값이라는 이야기입니다. 그러므로 img.setAttribute라는 속성(메소드)는 없습니다.

    이렇게되는 가장 흔한 이유는 document.getElementById()를 실행하는 시점에 DOM이

    구성되지 않아서 그렇습니다.

    script 태그 부분을 body 태그 안에서 끝쪽으로 빼거나 onload 이벤트를 사용하시면 됩니다.

    <body>
       <ul>....</ul>
       <script>
            // js codes
       </script>
    </body>


  • 피자7
    637
    2021-01-19 20:31:59

    html 로드되기전에 스크립트 먼저 실행한거같은데

    두번쨰줄에 console.log(img) 이거 추가해서 null 이라 뜨면 빼박임

    당장간단하게 해결하려면 그냥 스크립트를 body 맨 아래로 옮기면되고

    뭐가 문제인지 자세히 알려면 

    https://ko.javascript.info/onload-ondomcontentloaded

    이거 참고

  • kda
    21
    2021-01-19 20:47:01

    너무 감사합니다..ㅎㅎㅎ 오늘 계속 한 문제만 하루 종일 쥐고 있는데 못 푸니까 좌절감이 상당했는데 진짜 너무 너무 감사합니다.. 윗분에게도 정말 감사드립니다 

  • 로그인을 하시면 답변을 등록할 수 있습니다.