элемент положения позиции как добавлено к div

Question

Я делаю небольшую бесплатную игру ascii ski ... возвращаться к игре 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); 
} 

Прилагаемые разделители не назначаются left положение:

Вот как это должно выглядеть:

И console.log(document.getElementById(randX).style.left); ничего не отображается.

Любые мысли?

Answer 1

Вы должны дать единицы при назначении .style.left и .style.top:

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

(Обычно я бы сказал: «Или, как вы используете JQuery», за которым следует, например, с селектором, но id селекторы начиная с цифрами PITA ...)

Но отдельно: что, если два (или более) ваших случайно созданных препятствия находятся в том же положении 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"); 

} 

Side Примечание: Всякий раз, когда вы оказываетесь назначая статическую информацию стиля для многих элементов (position: absolute, top: 500px), это стоит посмотреть, стоит ли использовать вместо этого.