How can I display a list and focus on the first item in the list when a user presses the 'm' key on the keyboard? I have tried using the focus() method on the list item, but it does not seem to be working. Below is the code snippet that I am working with.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>VOD</title>
<script src='js/index.js'>
</script>
<style>
// CSS styles here
</style>
</head>
<body>
<video id='vid' src='textMotion.mp4' autoplay loop></video>
<div id='mid' class='hidden'>
<div id='mid1'>
<h1>TEXT</h1>
</div>
<div id='mid2'>
<ul id='ulid'></ul>
</div>
</div>
</body>
</html>
JavaScript:
// JavaScript functions here
document.addEventListener('keydown', changeChannel);
Despite the list being displayed when the user types 'm', the list item does not receive focus as intended. You can also view this issue on JSFiddle. Can someone please assist me in focusing on the list element correctly?