How to make a div move with Javascript?

Question

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

`querySelector` requires a _CSS selector_ and "dodger" isn't one. Either add an id or a class to your element. And then either `document.querySelector('#dodger')` or `document.querySelector('.dodger')`. — Andy, Nov 19 '21 at 03:50
Learn about [how to debug small programs](//ericlippert.com/2014/03/05/how-to-debug-small-programs/). Please try using the [debugging capabilities](//ali-dev.medium.com/how-to-easily-debug-in-javascript-5bac70f94f1a) of your browser. Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Use `parseFloat`, not `parseInt`. — Sebastian Simon, Nov 19 '21 at 03:52
@SebastianSimon I realized I was using Safari so the debugger wouldn't work — Paige, Nov 19 '21 at 03:54
You might want to show what your HTML looks like. I got it to work just fine after fixing the typos in your code. — Mordred, Nov 19 '21 at 03:55
Since you have an `id="dodger"` then your querySelector needs to be: `document.querySelector('#dodger');` — Mordred, Nov 19 '21 at 03:58
@Paige `dodger.style` can’t be `null`. [`HTMLElement.prototype.style`](//drafts.csswg.org/cssom/#the-elementcssinlinestyle-mixin) is not nullable. You probably mean `dodger` is `null`, which explains the error below. Is your ` — Sebastian Simon, Nov 19 '21 at 04:07
Please don't edit your question with information provided in the comments as it then makes those comments redundant, and the question confusing. — Andy, Nov 19 '21 at 04:23

DecPK · Answer 1 · 2021-11-19T03:58:43.517

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>

"Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'", perhaps it's my browser — Paige, Nov 19 '21 at 04:05
then you are not passing the `#dodger` element in the `getComputedStyle` Please check it again. — DecPK, Nov 19 '21 at 04:33

score 0 · Answer 2 · answered Nov 19 '21 at 05:19

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;
});

How to make a div move with Javascript?

2 Answers2