getElementById()는 항상 NULL 상태를 표시합니다.

이벤트 핸들러에 대한 JavaScript 레슨을 진행하면서 매우 기초적인 시작 인 getElementById()입니다. 아래는 내 HTML 및 JavaScript 코드입니다. 다음 코드에도 이미지 태그가 있지만 나는 새로운 사용자이므로 정확한 방법으로 태그를 게시 할 수 없습니다. 그러므로 src 태그가 완전히 불만이라고 생각하십시오. 여기 getElementById()는 항상 NULL 상태를 표시합니다.

<div class="considerVisiting"> 
    <img src="images/bq-twitter" id="mainImage" alt="BeQRious Twitter"> 
</div>

및

는 자바 스크립트 코드입니다 :

var myImage = document.getElementById("mainImage"); 
var imageArray = [images/1-btn, images/download-as-you-like]; 
var imageIndex = 0; 

function changeImage() { 

    myImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex++; 

    if (imageIndex >= imageArray.length) { 
    imageIndex=0; 
    } 
} 

setInterval(changeImage, 5000);

이 코드는 mainImage 사진을 5 초마다 변경됩니다. 하지만 내가 직면 한 문제는 Mozilla에서 FireBug를 사용하여이 스크립트를 실행할 때 다음과 같이 말합니다.

> Error : myImage is Null

스크립트에 대해서는 아무런 문제가 없습니다.

출처

2011-12-14 Abbas

JavaScript가 실행되기 전에 요소가 DOM *에 존재합니까? (브라우저가 브라우저를 만나 자마자 자바 스크립트가 실행된다는 것을 명심하십시오.)'document.ready' 이벤트 핸들러에 랩핑 했습니까? 또는 JS를 페이지 하단의'script' 블록에 넣으려고 했습니까? 그래서 DOM을 조립 한 후에 실행됩니다. –

당신의'img' 엘리먼트 (여러분의 소스에있는)의 속성이'id'입니까? Internet Explorer에는 ID 대신 이름에 일치하는 버그가 있지만 다른 브라우저에서 올바르게 불만을 제기합니다. – scunliffe

변경 :

<img src="images/bq-twitter" **id="mainImage"** alt="BeQRious Twitter" />

하려면 :

<img src="images/bq-twitter" id="mainImage" alt="BeQRious Twitter" />

** 유효하지 않습니다.

출처

2011-12-14 23:27:48 PriorityMark

아마도,하지만 그게'id' 속성을 강조하는 수단 일 뿐이라고 희망했는데 ... –

.getElementById()은 지정된 ID의 요소가 없으면 null을 반환하므로 해당 요소가 구문 분석되기 전에 스크립트가 실행 중이면 표시되는 동작이 올바른 것입니다. 그냥 짐작 하겠지만 문서의 <head>에있는 스크립트는 무엇입니까? 브라우저는 위에서부터 아래로 문서를 파싱하는 동안 브라우저가이를 감지하면 실행됩니다. 스크립트는 이미 브라우저에서 구문 분석 한 요소 (문서의 상위/이전 요소)에만 액세스 할 수 있으므로 본문의 맨 아래로 <script> 섹션을 이동하면 모든 요소 뒤에 있으므로 (분명히) 그들을 액세스 할 수 있습니다.

다른 방법으로 문서의 "onload"또는 "document.ready"코드를 실행하는 것입니다. "onload"는 브라우저가 전체 문서가로드 된 후에 만 실행되는 이벤트입니다.

으로 분명히 잘못 튀어 유일한 다른 점은이 라인 :이 문자열의 배열을 의미 한 가정

var imageArray= [images/1-btn,images/download-as-you-like];

, 그래서 다음과 같이해야한다 :

var imageArray= ["images/1-btn", "images/download-as-you-like"];

출처

2011-12-14 23:53:20 nnnnnn

코드에서

는, 배열의 값은해야

> var imageArray = [images/1-btn, images/download-as-you-like];

즉, 문자열 리터럴이어야합니다 :

var imageArray = ['images/1-btn', 'images/download-as-you-like'];

또한 정당한 이유가없는 한 'setAttribute'를 사용하지 마십시오. 'setAttribute'는 버그가 있고 신뢰할 수없는 경우가 있기 때문에 대신 DOM 속성을 사용하십시오.너무, 당신이 정말로 DOM 객체가 아닌 HTML 태그의 속성의 속성을 설정하려고하는과 같이하는 것이 더 자연 :

> myImage.setAttribute("src",imageArray[imageIndex]);

은 다음과 같아야합니다 또한

myImage.src = imageArray[imageIndex];

imageIndex = imageIndex % imageArray.length;

> if (imageIndex >= imageArray.length) { 
> imageIndex=0; 
> }

는 모듈러스 연산자 %를 사용하여 관리 될 수있다

function changeImage() { 
    myImage.src = imageArray[index++ % imageArray.length]; 
}

또한 사용하여 폐쇄하여 전역 변수를 제거 할 수 있습니다 : 그러나

var changeImage = (function() { 

    var myImage = document.getElementById("mainImage"); 
    var imageArray = ['images/1-btn', 'images/download-as-you-like']; 
    var imageIndex = 0; 

    return function() { 
     myImage.src = imageArray[index++ % imageArray.length]; 
    } 
}());

, 당신은 요소 후 위의 코드 를 실행해야합니다

전체 기능이 감소 될 수있다 id가 인 메인 이미지이 DOM에 존재합니다 (예 : 당신은 머리에서 그것을 실행할 수 없습니다). 함수를 호출하고 window.onload을 사용하여 ID를 전달하는 것이 좋습니다.

출처

2011-12-14 23:54:27 RobG

멋진 제안을 주셔서 감사합니다. :) 나를 도왔습니다 :) :) 감사합니다. – Abbas

나는 모든 것을 완벽하게 해내 고있었습니다. * 스택에 img 태그로 사용되어 모든 것이 HTML4 문서 유형을 따르는 다른 방법으로 눈에 띄게됩니다 ... 내가 사용하고 있었던 것은 브라우저에 이미 스크립트를 실행하여 스크립트가 실행되기 전에 스크립트를 배치했습니다 DOM 트리에 ... 나는 그것을 고치고 작동했습니다. D 다시 한번 감사드립니다. – Abbas

getElementById()는 항상 NULL 상태를 표시합니다.

답변

관련 문제