IE7 CSS 블록과 상대 위치 자바 스크립트 버그

Question

값이 주어지면 특정 경로에서 CSS 블록을 이동시키는 간단한 JS 스크립트가 있습니다.

당신은

이 코드 http://jsfiddle.net/rayshinn/6DGfb/는 IE7을 제외한 크롬과 파이어 폭스에서 잘 작동하는 것 같다 여기에 코드를 살펴 수 있습니다.

marker = document.getElementById("marker"); 
    this.setPosition(INITIAL_X, INITIAL_Y); 

을 다음과 같이 라인 (27)은

Line: 27 
Char:13 
Error: Object doesn't support this property or method 
Code: 0 
URL: http://localhost/test/js/plot.js 

은 아래 참조 용 내 전체 JS 스크립트입니다 다음과 같이

내가 IE에서 얻을 오류입니다.

(function() { 
    var INITIAL_X = 550, 
     INITIAL_Y = 152; 

    // f(v) -> {"x" : x, "y" : y} 
    var calculatePosition = function (value) { 
     var result = {}; 

     result.x = INITIAL_X - value/9; 
     result.y = INITIAL_Y + 0.117 * value/ 9 ; 


     return result; 
    } 

    var map = { 
     marker : null, 
     value : 0, 

     setPosition : function (x, y) { 
      marker.style.left = x + "px"; 
      marker.style.top = y + "px"; 
     }, 

     init : function() { 
      marker = document.getElementById("marker"); 
      this.setPosition(INITIAL_X, INITIAL_Y); 
     }, 

     increment : function() { 
      this.value++; 
      var result = calculatePosition(this.value); 
      this.setPosition(result.x, result.y); 
     }, 

     decrement : function() { 
      this.value--; 
      var result = calculatePosition(this.value); 
      this.setPosition(result.x, result.y); 
     } 
    }; 

    map.init(); 

    for (var i = 0; i < 100; i++) { 
     map.increment(); 
    } 
})(); 

시간을내어이 문제를 해결할 수 있도록 도와 주셔서 감사합니다. 언제나 어떤 제안이라도 대단히 감사하겠습니다!

Answer 1

문제는 라인

marker = document.getElementById("marker"); 

입니다 코드가 기대 보인다 marker이 map 객체의 속성으로 해결되지 않는

; 대신 전역 개체의 속성으로 확인됩니다. 그러나 IE는 전역 개체를 페이지 내의 요소 ID에 해당하는 이름으로 채운 다음 덮어 쓸 수 없도록합니다. 즉, IE에는 이미 덮어 쓸 수없는 글로벌 이 있습니다.

과 같은 묵시적 ​​전역을 피하는 것이 좋은 이유 중 하나입니다. 가장 쉬운 수정 markerthis.marker에 대한 참조를 변경하는 것입니다 :

setPosition : function (x, y) { 
     this.marker.style.left = x + "px"; 
     this.marker.style.top = y + "px"; 
    }, 

    init : function() { 
     this.marker = document.getElementById("marker"); 
     this.setPosition(INITIAL_X, INITIAL_Y); 
    },