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 .