JavaScript move object-CodePudding

i have a script for move DOM object, but it doesn't work, i think troubles in my keydown countruction where im trying to add/subtract and nothing happens. Can somebody explain why?

    mouse.setAttribute('tabindex', '0')
    alert(typeof( mouse.style.left));
    mouse.addEventListener('click', (event) => {
        mouse.style.position = 'fixed';

        mouse.style.left = mouse.getBoundingClientRect().left   'px';
        mouse.style.top = mouse.getBoundingClientRect().top   'px';
    })

    mouse.addEventListener ('focus', (event) =>  {
      mouse.addEventListener('keydown', (event) => {
            if (event.keyCode == 37){
                console.log('left');
                let left =  mouse.style.left
                mouse.style.left = left - 20   'px';
            }
            if (event.keyCode == 38){
                console.log('up');
                let up =  mouse.style.top;
                mouse.style.top = up - 20   'px';
            }
            if (event.keyCode == 39){
                console.log('right');
                let right =  mouse.style.left
                mouse.style.left = right    20   'px';
            }
            if (event.keyCode == 40){
                console.log('down');
                let down =  mouse.style.top
                mouse.style.top = down   20   'px';
            }
        })  
    })
    
    
  </script>

CodePudding user response：

does not parse a string such as '20px' as 20. As mentioned in the comments, you need to parse your styles as a number. This means using a function such as parseInt as demonstrated below.

Also, registering an event handler inside an event handler may not result in what you wish. In particular: If you focus the div twice, the event handler will run twice.

var mouse = document.getElementById('mouse');
mouse.setAttribute('tabindex', '0')
mouse.addEventListener('click', (event) => {
    mouse.style.position = 'fixed';

    mouse.style.left = mouse.getBoundingClientRect().left   'px';
    mouse.style.top = mouse.getBoundingClientRect().top   'px';
})

mouse.addEventListener ('focus', (event) =>  {
  mouse.addEventListener('keydown', (event) => {
        if (event.keyCode == 37){
            console.log('left');
            let left = parseInt(mouse.style.left)
            mouse.style.left = left - 20   'px';
        }
        if (event.keyCode == 38){
            console.log('up');
            let up = parseInt(mouse.style.top);
            mouse.style.top = up - 20   'px';
        }
        if (event.keyCode == 39){
            console.log('right');
            let right = parseInt(mouse.style.left)
            mouse.style.left = right    20   'px';
        }
        if (event.keyCode == 40){
            console.log('down');
            let down = parseInt(mouse.style.top)
            mouse.style.top = down   20   'px';
        }
    })  
})

<div id="mouse" style="background-color: yellow">Hi</div>

CodePudding user response：

We can use GitHub Copilot to generate the correct code for us.

Notice how parseInt must be used to convert from "20px" to the number 20.

let mouse = document.getElementById("mouse");

// add a keydown event listener to mouse
// if the left key is pressed, subtract 20px from the mouse's left style
// if the right key is pressed, add 20px to the mouse's left style
// if the up key is pressed, subtract 20px from the mouse's top style
// if the down key is pressed, add 20px to the mouse's top style
mouse.addEventListener("keydown", function(event) {
    if (event.key === "ArrowLeft") {
        mouse.style.left = parseInt(mouse.style.left) - 20   "px";
    } else if (event.key === "ArrowRight") {
        mouse.style.left = parseInt(mouse.style.left)   20   "px";
    } else if (event.key === "ArrowUp") {
        mouse.style.top = parseInt(mouse.style.top) - 20   "px";
    } else if (event.key === "ArrowDown") {
        mouse.style.top = parseInt(mouse.style.top)   20   "px";
    }
}