CODEWITHSUNDEEP
javascripthtml
Jack S.
Jack S.

Reputation: 25

Move an <img> when button pressed

Here is my code that I am currently using for the function, I have made imgs move in the past using key codes but what I used a function to move it for me, the code looks like it should work there is probably just a silly error:

<!DOCTYPE html>
    <html>
        <head>
            <title>Return To Alnerwick</title>
            <style>
               body
                 {
                    background-image: url("https://s-media-cache-ak0.pinimg.com/736x/e8/d6/fc/e8d6fc15671a05eeaf592f85c6dbb2db.jpg");
                    background-size: 1500px 1000px;
                    background-repeat: no-repeat;
                 }

               img
                 {
                    position:absolute;
                    TOP:650px;
                    LEFT:750px;
                    width:100px;
                    height:100px
                 }
            </style>
            <script>
               function move() {
                  var element = document.getElementById("char");
                  element.style.left = parseInt(element.style.left) - 90 + 'px';
               }
            </script>
       </head>
       <body>
           <img id="char"src="/New Piskel (5).gif">
           <button onclick="move();">move</button>
       </body>
    </html>

Upvotes: 0

Views: 61

Answers (3)

CodeCabin
CodeCabin

Reputation: 166

Your problem is that element.style.left won't return its position. There are a couple of solutions:

1) You know that your image is already 750px from the left so you can just go

var img_left=750;

at the beginning of your script tag and then go

img_left=img_left-90;
element.style.left = img_left + "px";

in your function.

2) if you want to get the position of the element, you would go

element.getBoundingClientRect().left;

instead of element.style.left so the whole line would be

element.style.left=(element.getBoundingClientRect().left-90)+"px";

Upvotes: 0

daniel0mullins
daniel0mullins

Reputation: 1959

It's because you are using a stylesheet. When using a stylesheet, you have get the computed styles:

function move() {
     var element = document.getElementById("char");
     var style = window.getComputedStyle(element);
     console.log("Current value: " + style.left);
     element.style.left = (parseInt(style.left) - 90) + 'px';
}

See a working fiddle: https://jsfiddle.net/vgb7tc03/1/

Also getComputedStyle reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Upvotes: 2

Matt Spinks
Matt Spinks

Reputation: 6698

In your move function, you are referencing element.style.left. This is the element's inline style property. That inline style property is not defined in your markup at all.

You are defining the LEFT property in your css (not inline). What you will need to do is either reference the LEFT css property from your function, or set the left property inline in your element instead of in CSS.

Upvotes: 0

Related Questions