Unable to set div.style.left and div.style.top css properties via JavaScript

Question

I ran in a very confusing problem today

I have a canvas, and a div, like this

<canvas id="canvas" width="800" height="400"></canvas>
<div id="xy"></div>

I then set the properties of the div via a css file, e.g. position:absolute and display:none Then, i write the X/Y Position in the div via JS and try to set the properties of the div so that the div follows the mouse around, like this

var div = document.getElementById("xy");
var x = e.pageX - this.offsetLeft - 1;
var y = e.pageY - this.offsetTop - y0 - 0.5;
div.style.display = "block";
div.style.left = e.pageX + 25;
div.style.top = e.pageY -10;
div.style.backgroundColor = "#f00";

The funny thing now is: i can set the display and backgroundColor without a problem, but the left and top properties don't work. If i delete my DOCTYPE-declaration in my HTML file though, i can modify the left and top properties without any trouble. Working without doctype is out of the question of course. Am i doing something that shouldn't be done or missing something completely obvious?

Solution

You have forgotten "px":

div.style.left = (e.pageX + 25) + 'px';
div.style.top = (e.pageY -10) + 'px';

You might also want to add div.style.position = "absolute";

If you think there's any chance that e.pageX or e.pageY will be strings rather than numbers, throw a parseInt in:

div.style.left = (parseInt(e.pageX, 10) + 25) + 'px';
div.style.top = (parseInt(e.pageY, 10) - 10) + 'px';

Comments

[T.J. Crowder]

+1, but your parseInt is unnecessary or, if required, has the ending ) in the wrong place. I believe e.pageX is already a number, but if there's any chance it isn't, you want = (parseInt(e.pageX, 10) + 25) + 'px'; (Note I also put the radix on it. You almost always want to tell parseInt specifically what radix to use.)

[ke20]

yes, but as it is a concatenated string it's more secure. I personally prefer :). (alright for the radix, I will use now :))

[T.J. Crowder]

My point is that what's there is actively wrong, not that it's not ideal. If e.pageX is a string (say, "10"), then parseInt(e.pageX + 25) will be 1025, not 35, because when you add a number to a string, the number is converted to text and appended: jsbin.com/ekiwup

[Ramon Wenger]

that was just it. my head just met my desk at a high velocity. thank you very much ;) what i already had tried was + ' px', but there mustn't be a ' ' in it, i realized just now

[Ramon Wenger]

the parseInt isn't even necessary, it works with just (e.pageX + 25) + 'px'

[T.J. Crowder]

@RamonWenger: Yeah, that's what I said up above. pageX and pageY are already numbers.