New to javascript I've seen many different tutorials on how to move divs, but for some reason, it never works, here's what I've seen so far
let dodger = document.querySelector('dodger');
let moveBy = 10;
windows.addEventListener('load',() =>{
dodger.style.position = 'absolue';
dodger.style.left = 0;
dodger.style.top = 0;
} )
window.addEventListener('keyup', (e) => {
switch (e.key) {
case 'ArrowLeft':
dodger.style.left = parseInt(dodger.style.left) - moveBy + 'px';
break;
case 'ArrowRight':
dodger.style.left = parseInt(dodger.style.left) + moveBy + 'px';
break;
case 'ArrowUp':
dodger.style.top = parseInt(dodger.style.top) - moveBy + 'px';
break;
case 'ArrowDown':
dodger.style.top = parseInt(dodger.style.top) + moveBy + 'px';
break;
}
});
dodger being a black square 100 x 100 px
1) You can get the HTML element by passing the CSS selector, If it is an id then you have prefix it with #, if class then prefix it with ..
let dodger = document.querySelector('#dodger');
2) You can get top, left, right, bottom from getComputedStyle and move it
let dodger = document.querySelector('#dodger');
let moveBy = 10;
window.addEventListener('keyup', (e) => {
const styles = getComputedStyle(dodger);
switch (e.key) {
case 'ArrowLeft':
dodger.style.left = parseInt(styles.left) - moveBy + 'px';
break;
case 'ArrowRight':
dodger.style.left = parseInt(styles.left) + moveBy + 'px';
break;
case 'ArrowUp':
dodger.style.top = parseInt(styles.top) - moveBy + 'px';
break;
case 'ArrowDown':
dodger.style.top = parseInt(styles.top) + moveBy + 'px';
break;
}
});#dodger {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}<div id="dodger"></div>window.addEventListener('keyup', (e) => {
const dodger = document.querySelector('#dodger');
const move = {
ArrowLeft: {left: -1, top: 0},
ArrowRight: {left: 1, top: 0},
ArrowUp: {left: 0, top: -1},
ArrowDown: {left: 0, top: 1},
};
const coords = dodger.getBoundingClientRect();
const moveBy = 100;
dodger.style.left = (move[e.key].left * moveBy) + coords.left;
dodger.style.top = (move[e.key].top * moveBy) + coords.top;
});