How can i change selection by pressing specific keyboard key in a html list

April 7, 2022

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>

>Solution :

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