HTML-Circle doesnt move right or bottom-CodePudding

I take my first footsteps in HTML and I want that my code does the following things:

when right arrow key is pressed, move circle to right side
when down arrow key is pressed, move circle to bottom

But instead it does the following: When one of these keys is pressed, he moves only once and than no more. Why is this?

<html>
    <head>
        <title>HTML Test</title>
        <style>
            #circle {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background: red;
                                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="circle"></div>
    </body>
    <script>
        document.onkeydown = function (event) {
            var circle = document.getElementById("circle");
        
            if (event.keyCode == 39) {
                circle.style.left  = 100;
                console.log("right")
            } else if (event.keyCode == 40) {
                circle.style.top  = 100;
                console.log("bottom")
            }
        }
    </script>
</html>

CodePudding user response：

You forgot about the units!

I changed your snippet to keep the actual values in 2 variables and added a function to update the circles style properties by using those vars and appending the units.

<html>
    <head>
        <title>HTML Test</title>
        <style>
            #circle {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="circle"></div>
    </body>
    <script>
        var circle = document.getElementById("circle");
        var circleLeft = 0;
        var circleTop = 0;
        
        var updatePosition = function(left, top) {
           circle.style.left = left   'px';
           circle.style.top = top   'px';
        };

        // once at the start
        updatePosition(circleLeft, circleTop);
        
        document.onkeydown = function (event) {
            if (event.keyCode == 39) {
                circleLeft  = 100;
                console.log("right");
            } else if (event.keyCode == 40) {
                circleTop  = 100;
                console.log("bottom");
            }
            updatePosition(circleLeft, circleTop);
        }
    </script>
</html>

CodePudding user response：

There is probably a more elegant way of doing this, but as
Rene said in the comments, you are dealing with strings not numbers and therefore will have trouble actually preforming simple operations like = 100. You instead need to substring the style string, parse the number from it and then add your number, then re-add the "px" to the end (actually might not be necessary since it seems to infer that 100 == 100px in HTML, but not the other way around.)

Here is a fix that worked for moving it left!

    <script>
        circle.style.left = "0px";
        document.onkeydown = function (event) {
            var circle = document.getElementById("circle");
        
            if (event.keyCode == 39) {
                
                console.log(circle.style.left.substring(0,circle.style.left.length -2))
                circle.style.left = (parseInt(circle.style.left.substring(0,circle.style.left.length -2))   100)   "px"
                console.log(circle.style.left)
            } else if (event.keyCode == 40) {
                circle.style.top  = 100;
                console.log("bottom")
            }
        }
    </script>

CodePudding user response：

Here is the working example. I have set the 10px move position instead of 100px.

document.onkeydown = function (event) {
            var circle = document.getElementById("circle");

            if (event.keyCode == 39) {
                for (let i = 0; i < 10; i  ) {
                    (i => {
                        setTimeout(() => {
                            const left = window.getComputedStyle(circle).left;
                            circle.style.left = `${( left.replace("px", "")   i * 2) %
                            window.innerWidth}px`;
                        }, 500);
                    })(i);
                }
            } else if (event.keyCode == 40) {
                for (let j = 0; j < 10; j  ) {
                    (i => {
                        setTimeout(() => {
                            const top = window.getComputedStyle(circle).top;
                            circle.style.top = `${( top.replace("px", "")   j * 2) %
                            window.innerWidth}px`;
                        }, 500);
                    })(j);
                }
            }
        }

#circle {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background: red;
            position: absolute;
        }

<div id="circle"></div>