Make image face movement direction html

Question

I am trying to make an image face the direction it moves. For example, the player presses "up" and the image faces up. How would I achieve this?

Code: Javascript

        function move_img(str) {
        var step=10; 
        switch(str){
            case "down":
                var x=document.getElementById('braum').offsetTop;
                x= x + step;
                document.getElementById('braum').style.top= x + "px";
                break;

                case "up":
                var x=document.getElementById('braum').offsetTop;
                x= x -step;
                document.getElementById('braum').style.top= x + "px";
                break;

                case "left":
                var y=document.getElementById('braum').offsetLeft;
                y= y - step;
                document.getElementById('braum').style.left= y + "px";
                break;

                case "right":
                var y=document.getElementById('braum').offsetLeft;
                y= y + step;
                document.getElementById('braum').style.left= y + "px";
                break;
        }
    }

Code:HTML

    <img src=images/braum.png id='braum' style="position:absolute; left: 500; top: 100;">
<br><br><br><br>
    <input type=image onClick=move_img('up') src="images/uparrow.png">
<br>
    <input type=image onClick=move_img('left') src="images/leftarrow.png">
    <input type=image onClick=move_img('right') src="images/rightarrow.png"'>
<br>
    <input type=image onClick=move_img('down') src="images/downarrow.png">
</body>
</html>

Thanks for your help!

Answer 1

Generally your algorithm is right, but, you have many problems with your syntax and organization

1. you should wrap onclick value with quotation mark > onclick="move_img('...')"
2. In your inline CSS - you are missing px unit, so it should be > left: 500px; top: 100px
3. In your right button - you have an extra apostrophe in the end (before the ending > sign

Though not completely wrong, in some cases - offsetLeft and offsetTop differ from top and left - so it is not wise to use them together

In order to change the rotation you should use the transform CSS property, in order to access it by JS use element.style.transform - the value is rotate(Xdeg) where X is the degrees that you want to rotate the element by

This is a working example for such thing (I made some changes to the HTML because I don't have the images, but the logic stays the same):

function move_img(side){
 var step = 10;
 var element = document.getElementById('braum');
 var left = parseInt(element.style.left);
 var top = parseInt(element.style.top);
 var rotation = 0;
    
 switch(side){
     case 'up': top-=step; rotation = -90; break;
     case 'right': left+=step; rotation = 0; break;
     case 'left': left-=step; rotation = 180; break;
     case 'down': top+=step; rotation = 90; break;
 }
 element.style.top = top+'px';
 element.style.left = left+'px';
 element.style.transform = 'rotate('+rotation+'deg)';
}

#braum{
  width: 40px;
  height: 40px; 
  color: white;
  text-align: center;
  transition: transform 0.5s; /* Remove This to remove the animation */
  background: green; 
  position:absolute; 
}

<div id='braum' style="left: 100px; top: 100px;">Hi</div>
    <input type="button" onclick="move_img('up')" value="up" >
    <input type="button" onclick="move_img('left')" value="left" >
    <input type="button" onclick="move_img('right')" value="right" >
    <input type="button" onclick="move_img('down')" value="down" >