I want to change the selection of li by pressing the p keyboard key. In my example below I manage to change the selection and automatically change the color of the selection to yellow but I have a problem that it goes down to a specific point also when you scroll down it does not go to the next li that is in row.

I want to create something that after I press the p button on the keyboard to select the first element li and change the background to yellow to be noticed that we are currently on that li element, then after pressing it again to select the second li element and so on..

Here is my current code Stackblitz Example

var lis = document.getElementById('steps').getElementsByTagName('li');
document.onkeydown = function(e) {
  if (e.keyCode == 80) {
    pos = window.scrollY;
    fnd = false;
    for (const li of lis) {
      li.style.backgroundColor = 'white';
    }
    for (const li of lis) {
      if (fnd) {
        li.style.backgroundColor = 'yellow';
        window.scrollTo(
          window.scrollX,
          pos   li.getBoundingClientRect().top - 100
        );
        break;
      }
      fnd = li.getBoundingClientRect().top > 100;
    }
  }
};

<ul id="steps">
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
    industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </li>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
    industry's standard dummy text ever since the 1500s,
  </li>
</ul>

CodePudding user response：

rather make use of the Sibling property this will loop once you reach the end

stackblitz

  var lis = document.getElementById('steps').getElementsByTagName('li');
  let isFirst = true;
  let currentElement = lis[0];
  document.onkeydown = function (e) {
    if (e.keyCode == 80) {
      pos = window.scrollY;
      fnd = false;
      for (const li of lis) {
        li.style.backgroundColor = 'white';
      }
      if(isFirst){
        isFirst = false;
      } else {
        if (currentElement.nextElementSibling) {
          currentElement = currentElement.nextElementSibling;
        } else {
          currentElement = lis[0];
        }
      }
      currentElement.style.backgroundColor = 'yellow';

      window.scrollTo({
        left: window.scrollX,
        top: pos   currentElement.getBoundingClientRect().top - 100,
        behavior: 'smooth',
      });
    }
  };

edit

I just added the scrolling option too

edit 2

made scrolling smooth

edit 3

fixed first element not highlighting