'Move an image to left or right using arrow button

I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys there was a error once but it got solved by moving the below the body and can you tell me why is that????

var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;

blueCar.addEventListener("animationiteration",function(){
    var random = ((Math.floor(Math.random()*3))*130)
    blueCar.style.left = random+"px";
    counter++;
})
**next code is not working like it sappose to do**
 




redCar.addEventListener("keydown",function(e){
    if(e.keyCode=="39")
    {
        var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
    if(redCarleft<260)
    {
        redCar.style.left = (redCarleft+130)+"px";
    
    }
}; *this is the command of left key*
    if(e.keyCode=="37")
    {
        var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
    if(redCarleft>0){
        redCar.style.left = (redCarleft-130)+"px";
    }
} 
})
//this is my css which is working is fine

*{
    margin: 0%;
    padding: 0%;
}

body{
    background-color: #34adff;
    background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
    min-height: 800px;
}

#game{
    height: 500px;
    width: 390px;
    background-color: 1rem solid black;
    background-image:url(narutoR.png) ;
    background-size: contain;
    margin: 1rem auto;
    overflow: hidden; 
}

#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}

#bluecar img{
    height: 100px;
}

@keyframes move {
    0%{
        top: 0px;
    }    
    100%
    {
        top: 501px;
    }
}
#redcar{
    height: 100px;
    width: 130px;
    background-color:red;
    position: relative;
    top: 250px;
    left: 130px;
    text-align: center;
    }

#redcar img{
    height: 100px;
}

#result{
    height: 200px;
    width: 400px;
    background-color: darkred;
    margin:5rem ;
    border: 2px solid white;
    border-radius:20px ;
    font-size: 30px;
    text-align: center;
    display:none;
}

#score{
    font-size: 2.2rem;
    color:goldenrod;
}

#btn{
    padding: 0.5rem  1rem;
    border: none;
    border-radius: 20px;
    background-color:black;
    color:cyan;
    font-size: 25px;
    text-transform: uppercase;
    margin-top: 10px;
    cursor: pointer;
}
**this is working fine as i am able to access them perfectely**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>car game</title>
    <link rel="stylesheet" href="cargame.css">
</head>
<body>
    
    <div>
        <div id="game">
            <div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
            <div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
        </div>
        <div id="result">
            <h1>GameOver</h1>
            <p id="score"></p>
            <button id="btn" onclick="location.reload()">Restart</button>

        </div>

    </div>
</body>
<script src="cargame.js"></script>
</html>
javascripthtmlcssnode.jsreactjs


Solution 1:[1]

Add the keydown eventListener to the document.

document.addEventListener("keydown",function(e){
    if(e.keyCode=="39")
    {
        var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
    if(redCarleft<260)
    {
        redCar.style.left = (redCarleft+130)+"px";
    
    }
};
    if(e.keyCode=="37")
    {
        var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
    if(redCarleft>0){
        redCar.style.left = (redCarleft-130)+"px";
    }
}
})

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 Prana

Related Questions