#eventsjs

Say you want to move a block around your page using Javascript but you don’t know how? well now i’ll show you how.

in your html you want to create a div with the id of dodger.

<div id="game">             <div id="dodger" style="bottom: 0px; left: 180px;"></div>   </div>

In your css you want to define what the div “game is and also define “dodger” #dodger {   background-color: white;   height: 20px;   position: absolute;   width: 40px;}

#game {   background-color: #111;   height: 400px;   margin: 0 auto;   overflow: hidden;   position: relative;   text-align: center;   width: 400px;}

Now whats important to note is the height you have declared your #game and also the height and width you have declared your #dodger. These will be important for your next steps.

Next we have to create our code in a .js file.

1. We first need to grab it and save a reference to it in a variable.

const dodger = document.getElementById("dodger");

2. Now we'll build our moveDodgerLeft() function, adding a check on the current position of the dodger:

function moveDodgerLeft( ) {  const leftNumbers = dodger.style.left.replace("px", "");    const left = parseInt(leftNumbers, 10);    if (left > 0) {        dodger.style.left = `${left - 1}px`;    }}

now what is important to note about this is we are saying if left is greater ( > ) than 0 we can continue to move it left but once it reaches 0 it will stop. Also if you look at the information in the back ticks it is saying we can move our dodger -1 px every time we touch our left arrow key.

3. Last step is create an addEventListener.

document.addEventListener("keydown", function(e) {    if (e.key === "ArrowLeft") {        moveDodgerLeft();    }});

now you when you open up in the browser you will be able to move the dodger left.

Next we want to move the dodger right;

Note: It may seem logical that you would use the dodger's style.right property to move the dodger right, but that won't work. The reason is that changing the style.right property doesn't change the style.left property, which means we'd have conflicting information about where the dodger should be on the screen. JavaScript solves this problem by giving precedence to style.left. In other words, once the user presses the left arrow key for the first time and the value of style.left is changed, any subsequent changes to style.right will be ignored.

so we go straight to step two as we have already declared the reference and variable;

2. 

function moveDodgerRight () {    const leftNumbers = dodger.style.left.replace("px", "");    const left = parseInt(leftNumbers, 10);    if (left < 360) {        dodger.style.left = `${left + 1}px`;    }}

Notice how in this we have kept something in the left value because of note above. But whats change is the if line information. in this we are saying if it is less than (<) 360 we can continue to move right. To work out the 360 we have to take into consideration what we have written in out css document. Above we stated out #dodger is 40px wide by 20 px height and if the #game is 400px wide then we know that we have 360px of increments we can work with.

If you look at the information in the back ticks $ it is saying we can move our dodger +1 px every time we touch our left arrow key.

lastly the following is the code for move up and move down;

function moveDodgerUp () {    const bottomNumbers = dodger.style.bottom.replace("px", "");    const bottom = parseInt(bottomNumbers, 10);

 if (bottom < 380) {        dodger.style.bottom = `${bottom + 1}px`;    }} document.addEventListener("keydown", function(e){       if (e.key === "ArrowUp") {        moveDodgerUp();    }});

function moveDodgerDown() {    const bottomNumbers = dodger.style.bottom.replace("px", "");    const bottom = parseInt(bottomNumbers, 10);

   if (bottom > 0) {        dodger.style.bottom = `${bottom - 1}px`;    }} document.addEventListener("keydown", function(e){       if (e.key === "ArrowDown") {        moveDodgerDown();    }});

see if you can understand what information has changed in comparison to the other two functions and event listener. 

if you want to see this in full on my github account here is the link;