Блог

Я создал article элемент, внутри которого есть список it. Чего я пытаюсь добиться, так это переместить статью либо влево, либо вправо в зависимости от того, какая стрелка клавиатуры нажата. Тем не менее, он ничего не делает, когда я нажимаю стрелки, есть какие-либо предложения о том, как это исправить?

 function addMessage(elementId, message) {
  var browserList = document.getElementById(elementId),
    newItem = document.createElement('li');

  newItem.textContent = message;
  browserList.appendChild(newItem);

}

addMessage('browser', 'page loaded');

document.body.addEventListener('click', function() {
  addMessage('user', 'totally clicked it');
});

document.body.addEventListener('keyup', function keyboardedIt(event) {

  var oldLeft = getComputedStyle(document.body).left,
    newLeft;

  oldLeft = parseInt(oldLeft);

  if (event.key == 'ArrowLeft') {
    newLeft = oldLeft - 10;
  } else if (event.key == 'ArrowRight') {
    newLeft = oldLeft   10;
  }

  document.body.style.left = newLeft   'px';
}); 

 article {
  width: 50%;
  display: inline-block;
  height: 20%;
  background: red;
  display: flex;
  justify-content: center;
}

body {
  background: yellow;
} 

 <article>
  <ul id="browser">
  </ul>
  <ul id="user">
  </ul>
</article> 

В вашем коде было много ошибок, которые мне пришлось отлаживать, но в конце концов это сработало. Прежде всего, ваш элемент article имеет автоматическое значение для «left». Перейдите и определите значение следующим образом;

 article {
  width: 600px;
  display: inline-block;
  height: 20%;
  background: red;
  display: flex;
  justify-content: center;
  position: relative;
  left: 0;
}
 

Теперь у нас есть фактическое значение для left , которое равно 0.
Я также дал класс article для вашей статьи, см. Код js ниже.

 
const article = document.querySelector(".article"); // I gave a article class to article

document.body.addEventListener("keydown", function keyboardedIt(event) { //use keydown event
  const oldLeft = getComputedStyle(article).left; // get article's left 
  let newLeft;


  if (event.key == "ArrowLeft") {
    newLeft = `${parseInt(oldLeft) - 10}px`; // template literals 
  } else if (event.key == "ArrowRight") {
    newLeft = `${parseInt(oldLeft)   10}px`;
  }
 article.style.left = newLeft; });

 

Также html ;

  <article class="article">
      <ul id="browser">
      </ul>
      <ul id="user">
      </ul>
    </article>