How to able to only press enter on the selected link to proceed?

Question

Right now, you are able to navigate through the list of links with the arrow keys and they get highlighted wtih css, but I want to be able to press Return to proceed to the selected link that is highlighted. Any ideas on how to do that?

Sorry if the code is messy, pretty new.

var li = $('li');
var liSelected;

$(window).keydown(function(e) {
  if (e.which === 40) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.next();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.eq(0).addClass('selected');
      }
    } else {
      liSelected = li.eq(0).addClass('selected');
    }
  } else if (e.which === 38) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.prev();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.last().addClass('selected');
      }
    } else {
      liSelected = li.last().addClass('selected');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="meny">
  <ul>
    <li id="start"><a href="Spill/spill.html">Start new game</a></li>
    <li id="settings"> <a href="#">Setting</a></li>
    <li id="help"> <a href="#">Help</a></li>
    <li id="exit"> <a href="#">Exit</a></li>
  </ul>
</div>

 

 <!-- language: lang-css -->
  li.selected {
  color:white; font-size: 32px;}

  a {
  color:inherit;
  }
  a:focus {color:white; font-size: 32px; text-decoration: none;}

  ul
   {
  text-decoration: none;
  list-style-type: none;
  }
  <!-- end snippet -->

Answer 1

To make this work you can listen for the return key press, code 13, then click the a element contained within the li that has the .selected class. You should however note that this behaviour may interfere with any form elements you have in the DOM, as well as break accessibility rules should you need to maintain ISO compliance.

Also bear in mind that you can DRY up the logic which governs the selecting of li elements on up/down arrow key press. Try this:

var $li = $('li');

$(window).keydown(function(e) {
  if (e.which === 40 || e.which === 38) {
    e.preventDefault();
    var goingDown = e.which === 40;
    var $selected = $li.filter('.selected');
    $selected.removeClass('selected');

    var $target = $selected[goingDown ? 'next' : 'prev']();
    if (!$target.length)
      $target = $li[goingDown ? 'first' : 'last']();

    $target.addClass('selected');
  }
  
  if (e.which === 13) {
    var $selected = $li.filter('.selected');
    if ($selected.length)
      $selected.find('a')[0].click();
  }
});

// only for debugging:
$('a').click(function(e) {
  e.preventDefault();
  console.log(`You clicked ${$(this).text()}!`);
});

.selected,
.selected a {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="meny">
  <ul>
    <li id="start"><a href="Spill/spill.html">Start new game</a></li>
    <li id="settings"><a href="#">Setting</a></li>
    <li id="help"><a href="#">Help</a></li>
    <li id="exit"><a href="#">Exit</a></li>
  </ul>
</div>

Finally, note the use of preventDefault() in the arrow key handler to stop the page being scrolled when an arrow key is pressed, which is the standard behaviour.