'How to correctly format transform

  var kidX = "";
    
    if(kidX == ""){
    kidX = 100;
    }
    
    
    document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37) {
        kidX--;


    document.getElementById("kid").style.transform = "translateX(kidX + "px")";
    
       console.log(document.getElementById("kid").style.transform);

  
    }
    else if(event.keyCode == 39) {
    kidX++;
    document.getElementById("kid").style.transform = "translateX(kidX + "px")";
       // console.log(kidX + "px");
       console.log(document.getElementById("kid").style.transform);
    }
});
<!DOCTYPE html> 

<html>
  <head>
  
   
    
  </head>
  <style>
 img{
    height = 100px;
    }
   
    .guy{
    height = 100px;
    
    }
    div{
     height = 100px;
    }
    
</style>
  <body id="body">
    
  <p  >
            <div id="kid">
<img class = "guy" src="kid.png" alt="kid!" height = "100px"  />
<p>
 hello
</p>
              
</div>
            
    
    <p>
 
 

    
 </body></html>

Hello. I want to make the element kid move with the arrow keys, but I think I am formatting it wrong. Can someone tell me how to format it correctly, thanks. If there is a better way to make the element kid move left and right please tell me. I am new to JavaScript and html so any help is appreciated .

javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions