What is wrong in my JavaScript code?

Question

I am using a div and want it to move with mouse coordinates. I don't know what is wrong. Or the method I am using is wrong. Please help!

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
    <script></script>
    <style>
        #box{
            background:cyan;
            height:100px;
            width:100px;
        }
    </style>

</head>


<body onLoad="placeBox()">

    <div id="box"></div>

    <script>
    function placeBox(){
        var x = event.clientX;
        var y = event.clientY;
        var d = document.getElementById('box');
        d.style.position = "absolute";
        d.style.left = x+'px';
        d.style.top =  y+'px';
    }
    setInterval("placeBox()", 1);
    </script>
</body>
</html>

`event` is probably undefined; secondly, always post your questions with the error code displayed on the Console tab. — MackieeE, Jan 30 '14 at 09:39
You're trying to read an event object in response to a time interval instead of an event that has coordinates. — Quentin, Jan 30 '14 at 09:40

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

Instead of using a timeout, use an event callback for the mousemove event. Something like this, to keep it short:

function placeBox(event){
    var d = document.getElementById('box');
    d.style.position = "absolute"; // This could be set through CSS instead
    d.style.left = event.clientX + 'px';
    d.style.top = event.clientY + 'px';
}

document.addEventListener("mousemove", placeBox);

Demo

Notice that addEventListener is not supported by older browsers, so if you need such support, you would need to implement something like this for it to work cross-browser.

edited May 23 '17 at 12:03

Community

1
1

answered Jan 30 '14 at 09:44

Christofer Eliasson

29,772
6
69
99

1

This is the code I was typing. Simple and efficient. I would suggest to put with CSS #box {position: absolute}, instead of giving it with JS. – enguerranws Jan 30 '14 at 09:46
@enguerranws That is a good point, I'll add a small comment about that. Thanks! – Christofer Eliasson Jan 30 '14 at 09:48
I can use it as a cursor by hiding the original cursor but it doesn't show any effect on clicking can you tell me how can I do it? – Faiz Jan 30 '14 at 09:55
@Faiz Not sure what you mean. What should happen when you click? This might be fit for a new question, perhaps. – Christofer Eliasson Jan 30 '14 at 10:04
I want to use it as a cursor so that when I click something like a link it opens it. You got me? – Faiz Jan 30 '14 at 15:50
@Faiz Alright, that will take some work I believe. [This post](http://stackoverflow.com/questions/1148424/registering-clicks-on-an-element-that-is-under-another-element) might get you started. If you need further assistance, then it is probably better to post that as a new question. – Christofer Eliasson Jan 30 '14 at 16:08

score 0 · Answer 2 · answered Jan 30 '14 at 09:39

0

I wouldn't use setInterval() for this, but onmousemove should do the job.

By the way, you shouldn't pass placeBox() as a string :

setInterval(placeBox(), 1);

Also, as some others said : event is undefined here.

answered Jan 30 '14 at 09:39

enguerranws

7,273
7
40
83

score 0 · Answer 3 · answered Jan 30 '14 at 09:43

What's wrong is:

setInterval("placeBox()", 1);

Define first your setInterval() function, then remove the quoatation marks on placebox(), plus, indicate a return value in your placebox() function if you will use its return value for the function setInterval()

Maybe it should be like this:

setInterval(placeBox(), 1);

score 0 · Answer 4 · answered Jan 30 '14 at 09:43

function placeBox(){
        var x = event.clientX;
        var y = event.clientY;
        var d = document.getElementById('box');
        d.style.position = "absolute";
        d.style.left = x+'px';
        d.style.top =  y+'px';
    }

event is not defined here.

function move(){
    //do something on mouse move
}

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function init(){
    var body = document.getElementsByTagName('body')[0];

    addEvent(body, 'mousemove', move);
}

addLoadEvent(init);

What is wrong in my JavaScript code?

4 Answers4