How do I make second div move down and up with the w and s keys on the keyboard?

Question

The Problem I'm having is that the everytime i trigger the event key for w and s characters, it logs on the console showing the w event key being triggered, but nothing happens to the div as i want it to move up and down. I tried to use the code structure as the first div but could only get a console.log(e). How do i make it move up or down?

I'm building pong on basically div elements, and some js. I got the first paddle to work. When i tried to the run the same code but using keydown funtion and use e.key to equal w. It for some reason is shown console logging the w key being press down, but it never moves the second div.

 var playerOne = document.getElementById("playerOnePaddle"); var playerTwo = document.getElementById("playerTwoPaddle"); console.log(playerOne); console.log(playerTwo); window.addEventListener('keydown', function (e) { var y = parseInt(getComputedStyle(playerOne).top); e.preventDefault(); if (e.key === "ArrowUp") { y -= 1; playerOne.style.top = y + "px"; console.log(e); } else if (e.key === "ArrowDown") { y += 1; playerOne.style.top = y + "px"; console.log(e); } }); window.addEventListener('keydown', function (e){ var x = parseInt(getComputedStyle(playerTwo).top); e.preventDefault(); if (e.key === 'w') { x -= 1; playerOne.style.top = x + "px"; console.log(e); } else if (e.key === 's') { x = x + 1; playerOne.style.top = x + "px"; console.log(e); } }); 

 #backBoard { border: 1px solid black; height: 200px; position: relative; width: 400px; } #playerOnePaddle { background: black; border: 1px solid black; height: 50px; position: absolute; top: 0; left: 4px; width: 4px; } #playerTwoPaddle { background: red; border: 1px solid red; height: 50px; position: absolute; top: 0; left: 390px; width: 4px; } #ball { background-color: green; border: 1px solid black; border-radius: 50%; height: 15px; position: absolute; top: 0; left: 50px; width: 15px; } 

 <div id="backBoard"> <div id="playerOnePaddle"></div> <div id="playerTwoPaddle"></div> <div id="ball"></div> </div> 

Answer 1

在第二个keydown回调中，您需要更改playerOne的样式，将其添加到playerTwo 。

Answer 2

This should be what you are expecting (run the snippet) :

1. you don't have to make two exact event listeners just add all your code into one and use conditions.
2. your x and y were being reset each time the event function is executed so i moved them out of the callback function .
3. you were using on both events the same player playerOne .

 var playerOne = document.getElementById("playerOnePaddle"); var playerTwo = document.getElementById("playerTwoPaddle"); var y = parseInt(getComputedStyle(playerOne).top); var x = parseInt(getComputedStyle(playerTwo).top) window.addEventListener('keydown', function (e) { e.preventDefault(); if (e.key === "ArrowUp") { y -= 1; playerOne.style.top = y+"px"; } else if (e.key === "ArrowDown") { y += 1; playerOne.style.top = y+"px"; } else if (e.key === 'w') { x -= 1; playerTwo.style.top = x+"px"; } else if (e.key === 's') { x = x + 1; playerTwo.style.top = x+"px"; } }); 

 #backBoard { border: 1px solid black; height: 200px; position: relative; width: 400px; } #playerOnePaddle { background: black; border: 1px solid black; height: 50px; position: absolute; top: 0; left: 4px; width: 4px; } #playerTwoPaddle { background: red; border: 1px solid red; height: 50px; position: absolute; top: 0; left: 390px; width: 4px; } #ball { background-color: green; border: 1px solid black; border-radius: 50%; height: 15px; position: absolute; top: 0; left: 50px; width: 15px; } 

 <div id="backBoard"> <div id="playerOnePaddle"></div> <div id="playerTwoPaddle"></div> <div id="ball"></div> </div>