Не работает отступ скажите почему?

Question

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    #mouse {
      display: inline-block;
      cursor: pointer;
      margin: 0;
    }
    
    #mouse:focus {
      outline: 1px dashed black;
    }
  </style>
</head>

<body>

  <p>Кликните по "изображению" мыши и перемещайте её с помощью клавиш со стрелками.</p>

  <pre id="mouse" tabindex="0">
 _   _
(q\_/p)
 /. .\
=\_t_/=   __
 /   \   (
((   ))   )
/\) (/\  /
\  Y  /-'
 nn^nn
</pre>
  <script>
    let mouse = document.querySelector('#mouse');
    mouse.addEventListener('focus', function(event) {
      mouse.addEventListener('keydown', function(event) {
        if (event.code == 'ArrowDown') {
          mouse.style.top += '50px';
        }
      })
    })
  </script>

</body>

</html>

Answer 1

let mouse = document.querySelector('#mouse');
mouse.style.top = '0px';
mouse.addEventListener('focus', function(event) {
  mouse.addEventListener('keydown', function(event) {
    if (event.code == 'ArrowDown') {
      //console.log(mouse.style.top);
      mouse.style.top = (parseInt(mouse.style.top) + 10) + 'px';
    }
  })
})

#mouse {
  display: inline-block;
  cursor: pointer;
  margin: 0;
  position: relative;
}

#mouse:focus {
  outline: 1px dashed black;
}

<p>Кликните по "изображению" мыши и перемещайте её с помощью клавиш со стрелками.</p>

<pre id="mouse" tabindex="0">
 _   _
(q\_/p)
 /. .\
=\_t_/=   __
 /   \   (
((   ))   )
/\) (/\  /
\  Y  /-'
 nn^nn
</pre>

БЛОГ НА HUSL

Не работает отступ скажите почему?

Ответы (1 шт):