Untitled

<html>
<head>

<style type="text/css">
    #A {


        width: 100px;
        height: 50px;
        background-color:lightskyblue;
        font-size:40px;
		display:block;
		float:right;
    }
    #B {
        width: 100px;
        height:50px;

        background-color:orangered;
        text-align:center;
        font-size:40px;
		display:block;
		float:right;
		position:absolute;
	    }
    .crvena{
        background-color:blue !important;
    }

    div{

	}

</style>

</head>

<body>
<div>
	<span id="A"  style="margin-left:300px; margin-top:40px;">A</span>
	<span id="B"  style="margin-left:0px; margin-top:40px;">B</span>
</div>


<script type="text/javascript">
   var cvorA = document.getElementById("A");
    var cvorB = document.getElementById("B");


	document.body.addEventListener("keyup", pomjeriElementB);

	function pomjeriElementB(event){


		var left=cvorB.style.getPropertyValue("margin-left");
		var top=cvorB.style.getPropertyValue("margin-top");

			left= left.slice(0, -2);
			top= top.slice(0, -2);
		console.log(left);

		if(event.keyCode===68)
		{
				left=parseInt(left)+50;
				//console.log(left);
				cvorB.setAttribute("style", "margin-left:"+(left)+"px;margin-top:"+(top)+"px");

		}

		if(event.keyCode===65)
		{
				left=parseInt(left)-50;
				//console.log(left);
				cvorB.setAttribute("style", "margin-left:"+(left)+"px;margin-top:"+(top)+"px");

		}

		document.body.addEventListener("keyup", promijeniBoju);
			function promijeniBoju(){
				if(cvorB.style.right = "100px"){
				cvorA.style.backgroundColor = "yellow";
			}
		}

	}

</script>

</body>
</html>