div에 추가 된 위치 스팬 요소

Question

저는 약간의 ascii 스키 무료 게임을 만들고 있습니다 ... Win95 게임에 던졌습니다.

어떤 이유로 절대 위치를 설정하고 임의의 좌표로 설정 했음에도 불구하고 추가 된 장애물 범위가 한쪽으로 모입니다. 여기

은 (스팬 무작위로 배포됩니다) 보일 것입니다 방법은 다음과 같습니다 여기

이 간격으로 장애물을 생성하고 절대 위치 왼쪽 위치를 할당 내 코드입니다 :

function objectFactory() { 

var randObj = Math.floor((Math.random()*7)+1), 
      randX = Math.floor((Math.random()*700)+1), 
      randY = Math.floor((Math.random()*400)+1); 

$('#myObstacles').append("<span id=\"" + randX + "\">" + items[randObj] + "</span>"); 

document.getElementById(randX).style.position = "absolute"; 
document.getElementById(randX).style.left = randX; 
document.getElementById(randX).style.top = 500; 
console.log(document.getElementById(randX).style.left); 
} 

첨부 된 div에이 지정되지 않았습니다. 51,위치 :

여기가 보일 것입니다 방법은 다음과 같습니다

그리고, console.log(document.getElementById(randX).style.left); 아무것도 표시되지 않습니다.

의견이 있으십니까? .style.left 및 .style.top에 할당 할 때

Answer 1

당신은 단위를 줄 필요가 :

document.getElementById(randX).style.left = randX + "px"; 
document.getElementById(randX).style.top = "500px"; 

(일반적으로 내가 말할 것 "아니면 jQuery를 사용하고 같은"셀렉터 예를 들어 다음에,하지만 id 선택기 시작 숫자가 피타입니다 ...)

하지만 별도로 : 무작위로 생성 된 장애물 중 두 개 (이상)가 같은 randX 위치에 있다면 어떻게 될까요? 결국 id과 같은 여러 요소를 만들게되어 잘못된 것입니다.

대신

, 단지 객체로 직접 작업 :

function objectFactory() { 
    var randObj = Math.floor((Math.random()*7)+1), 
     randX = Math.floor((Math.random()*700)+1), 
     randY = Math.floor((Math.random()*400)+1), 
     obstacle = $("<span id=\"" + id + "\">" + items[randObj] + "</span>"); 

    obstacle.css({ 
     position: "absolute", 
     left:  randX, 
     top:  500 
    }).appendTo("#myObstacles"); 

} 

사이드 참고 : 당신은 자신이 요소 (position: absolute, top: 500px)의 많은 정적 스타일 정보를 할당 찾을 때마다, 그것은 사용 여부보고 가치 대신 클래스.