Home/ Questions/Q 8277127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T08:35:52+00:00

I’m a beginner in JavaScript, and trying to make a simple script that pushes

  • 0

I’m a beginner in JavaScript, and trying to make a simple script that pushes a box using the mouse pointer, but unfortunately it isn’t working for some reason, I hope you can help me out.

(This script is really primitive, only pushes the box from the left till now).

index.html :

<html>
<head>
    <title>Chase the box</title>
    <style>
        body {
        }

        .css-box{
            width : 100px;
            height : 100px;
            margin : auto;
            background-color : blue;
        }

    </style>
</head>

<body>
    <div id="box" class="css-box"></div>
    <script type="text/javascript" src="script.js"></script>
</body>

script.js :

var box = document.getElementById("box");

var pushBox = function(e){
    if(e.pageX == box.offsetLeft){
        box.style.left = box.style.left + 1 + "px";
    }
};

document.addEventListener("mousemove" , pushBox);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    box.style.left is a string. And in JavaScript if you do string + int the int will be type casted to a string and you get string + string. For instance, if box.style.left is 10px you get:

    '10px' + 1 + 'px'
  int typecasted to string
'10px' + '1' + 'px'
  create one string
'10px1px'

    And that will be the value of box.style.left. That isn’t what you want…

    To solve this you can use parseInt(), which parses a string into an int:

    box.style.left = parseInt(box.style.left) + 1 + "px";

    And your if is only matching when the X position of the cursor is exactly the same pixel as box.offsetLeft. That’s almost impossible, I don’t know what you are trying to do with that if?

    At least, box.style.left has no value the first time. You need to set the value at first to 0 and then use the event.

    A working example will be: http://jsfiddle.net/WouterJ/enLwh/ (please note that I have added position: relative; because we can’t use the left property on the current position)

    Some more tips, since you are new to JS:

    • If you do something like this:

      X = X + 12;

      You can short that up as:

      X += 12;

    • 0