CODEWITHSUNDEEP
javascripthtmlcss
Ander Latorre
Ander Latorre

Reputation: 11

moving a div with JS (edited)

I'm trying to move a div with JS accessing the div's css properties when I press the arrow keys. I've achieved to trigger an alert when I press a key but the div is not moving.This is the all my code:

EDIT: ive changed my JS script. now it does move 10px to the left (by erasing the transform property from the CSS) but it only does it once. i tried to fix it with a counter witch multiplies the 10px by the times i've clicked the key, still does it only once. 

   

function mover(event) {
capa=document.getElementById("movil");
left=-10;
Ltimes=1;
switch (event.keyCode) {
    case 37:
        // alert("works");
        capa.style.transform ="translateX("+left*Ltimes+"px)";
        Ltimes++;
        break;
    case "ArrowRight":

        break;
    case "ArrowUp":

        break;
    case "ArrowDown":

        break;

    default:
        break;
}


}
div#movil {
  background-color: khaki;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div#arriba {
  position: relative;
  text-align: center;
}

div#abajo {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

div#centro {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

div#izq {
  position: absolute;
}

div#der {
  right: 0;
  position: absolute;
}
<body onkeydown="mover(event)">
  <div id="movil">
    <div id="arriba">
      <button>+</button>
      <button>-</button>
    </div>
    <div id="abajo">
      <button>+</button>
      <button>-</button>
    </div>
    <div id="centro">
      <div id="izq">
        <button>+</button>
        <button>-</button>
      </div>
      <div id="der">
        <button>+</button>
        <button>-</button>
      </div>
    </div>
  </div>
  <input type="text" id="a">
</body>

As I said I've achieved to trigger the "works" alert but the div won't move.

PS: ignore the buttons I'll make them make the div bigger or smaller later on.

Upvotes: 0

Views: 78

Answers (3)

Ander Latorre
Ander Latorre

Reputation: 11

I'm really greatefull for all the comments this is the final working code:

var left=-10;
var Ltimes=1;
function mover(event) {
    capa=document.getElementById("movil");
    
    switch (event.keyCode) {
        case 37:
            // alert("works");
            capa.style.transform ="translateX("+left*Ltimes+"px)";
            Ltimes++;
            break;
        case "ArrowRight":

            break;
        case "ArrowUp":

            break;
        case "ArrowDown":

            break;

        default:
            break;
    }

    
}
div#movil {
    background-color: khaki;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
}

div#arriba {
    position: relative;
    text-align: center;
}

div#abajo {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

div#centro {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

div#izq {
    position: absolute;
}

div#der {
    right: 0;
    position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="js.js"></script>
</head>
<body onkeydown="mover(event)">
    <div id="movil">
        <div id="arriba">
            <button>+</button>
            <button>-</button>
        </div>
        <div id="abajo">
            <button>+</button>
            <button>-</button>
        </div>
        <div id="centro">
            <div id="izq">
                <button>+</button>
                <button>-</button>
            </div>
            <div id="der">
                <button>+</button>
                <button>-</button>
            </div>
           
        </div>

       
       
       
    </div>
    <input type="text" id="a">
</body>
</html>

Upvotes: 0

AndrewBramwell
AndrewBramwell

Reputation: 494

Here is a working example by by getting the left/top property value and minus a set amount of pixels then reapply the value.

  1. getComputedStyle -> required if loading external css
  2. getPropertyValue -> find what the current left or top value is.
  3. remove any letters (px) from start/end with .match() and .join()
  4. parse all of the above as an integer so we can remove or add a number to it
  5. add or remove our "pxToMove" value
  6. convert all that back to a string and add the "px" to the end.

capa = document.getElementById("movil");
function mover(event) {

    var style = getComputedStyle(capa);
    var pxToMove = 10;
    
    switch (event.keyCode) {
        case 37:
            //alert("works");
            capa.style.left= (parseInt(style.getPropertyValue("left").match(/\d/g).join("")) - pxToMove).toString()+"px";
            break;
        case 39:
            capa.style.left= (parseInt(style.getPropertyValue("left").match(/\d/g).join("")) + pxToMove).toString()+"px";
            break;
        case 38:
            capa.style.top= (parseInt(style.getPropertyValue("top").match(/\d/g).join("")) - pxToMove).toString()+"px";
            break;
        case 40:
            capa.style.top= (parseInt(style.getPropertyValue("top").match(/\d/g).join("")) + pxToMove).toString()+"px";
            break;

        default:
            alert(event.keyCode);
            break;
    }

    
}
div#movil {
    background-color: khaki;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div#arriba {
    position: relative;
    text-align: center;
}

div#abajo {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

div#centro {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

div#izq {
    position: absolute;
}

div#der {
    right: 0;
    position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="js.js"></script>
</head>
<body onkeydown="mover(event)">
    <div id="movil">
        <div id="arriba">
            <button>+</button>
            <button>-</button>
        </div>
        <div id="abajo">
            <button>+</button>
            <button>-</button>
        </div>
        <div id="centro">
            <div id="izq">
                <button>+</button>
                <button>-</button>
            </div>
            <div id="der">
                <button>+</button>
                <button>-</button>
            </div>
           
        </div>

       
       
       
    </div>
    <input type="text" id="a">
</body>
</html>

Upvotes: 1

Thomas__
Thomas__

Reputation: 330

capa.style.transform ="translateX(-10px)"; Looks to be what you meant

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX for reference

capa = document.getElementById("movil");
function mover(event) {
    
    switch (event.keyCode) {
        case 37:
            alert("works");
            capa.style.transform ="translateX(-10px)";
            break;
        case "ArrowRight":

            break;
        case "ArrowUp":

            break;
        case "ArrowDown":

            break;

        default:
            break;
    }

    
}
div#movil {
    background-color: khaki;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div#arriba {
    position: relative;
    text-align: center;
}

div#abajo {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

div#centro {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

div#izq {
    position: absolute;
}

div#der {
    right: 0;
    position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="js.js"></script>
</head>
<body onkeydown="mover(event)">
    <div id="movil">
        <div id="arriba">
            <button>+</button>
            <button>-</button>
        </div>
        <div id="abajo">
            <button>+</button>
            <button>-</button>
        </div>
        <div id="centro">
            <div id="izq">
                <button>+</button>
                <button>-</button>
            </div>
            <div id="der">
                <button>+</button>
                <button>-</button>
            </div>
           
        </div>

       
       
       
    </div>
    <input type="text" id="a">
</body>
</html>

Upvotes: 1

Related Questions