How to get keyboard/key selection to work in JavaScript – Blancer.com Tutorials and projects

I am trying to build a simple sound machine with various sounds only using JavaScript, specifically, Zelda Ocarina of Time sounds. Yes, I know it’s basic stuff, but I am still learning and can’t for the life of me figure this out.

Now, I can get the left and right arrow keys to cycle through the choices, but when I use the keys: A,S,D,F,G, or H I can’t get them to make a selection. No matter how many avenues I have tried.

Any help, tips, pointers, or ANYTHING constructive would be appreciated.

Sound Machine in browser

CODE:

const regions = Array.from(document.querySelectorAll('section[role="region"]'));
const keys = Array.from(document.querySelectorAll('#keys button'))
const keyTypes = keys.map(op => op.innerHTML);



const moveFocus = (region, item) => {
    region[item].focus();
}

const handleArrowEvent = (event, items, currentRegion) => {
    let currentItem =0;
    if(
        event.code === 'ArrowLeft' ||
        event.code === 'ArrowRight' ||
        event.code === 'KeyA' ||
        event.code === 'KeyS' ||
        event.code === 'KeyD' ||
        event.code === 'KeyF' ||
        event.code === 'KeyG' ||
        event.code === 'KeyH'
    ) {
        event.preventDefault();
        event.stopPropagation();
        console.log(event.target);
        const regionItems = Array.from(currentRegion.children);
        regionItems.forEach(child => {
            items.push(child)
        })
        currentItem = items.indexOf(event.target);
        const lastItem = items.length - 1;
        const isFirst = currentItem === 0;
        const isLast = currentItem === lastItem;

        if(event.code === 'ArrowRight') {
            currentItem = isLast ? 0 : currentItem + 1;
        } else if (event.code === 'ArrowLeft') {
            currentItem = isFirst ? lastItem : currentItem - 1;
        }

            moveFocus(regionItems, currentItem)
    }
}

const handleClick = event => {
    registerInput(event.target.innerHTML)
}



const handleKeyEvent = event => {
    const items = [];
    const currentRegion = event.target.closest('section[role="region"]')
    if (
        event.code === 'ArrowLeft' ||
        event.code === 'ArrowRight' ||
        event.code === 'KeyA' ||
        event.code === 'KeyS' ||
        event.code === 'KeyD' ||
        event.code === 'KeyF' ||
        event.code === 'KeyG' ||
        event.code === 'KeyH'
    ) { handleArrowEvent(event, items, currentRegion) }
}

const registerInput = input => {
    console.log(input)
}

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Heebo:wght@300&family=Press+Start+2P&display=swap');

html {
    font-size: 10px;
    background-image: url(../assets/img/lofz_ocTime.jpg);
    background-size: cover;
}

body , html {
    margin: 0;
    padding: 0;
    font-family: 'Bangers', cursive;
    font-size: 12px;
}

#keys {
    display: flex;
    flex: 1;
    min-height: 80vh;
    align-items: center;
    justify-content: center;
}


button {
    border: .4rem solid rgb(255, 5, 5);
    border-radius: .5rem;
    margin: 1rem;
    font-size: 1.5rem;
    padding: 1rem .5rem;
    transition: all 0.07s ease;
    width: 10rem;
    text-align: center;
    color: rgb(31, 240, 3);
    background: rgba(8, 7, 94, 0.753);
    font-weight: bold;
    text-shadow: 0 0 .5rem black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/stylesheet.css">
  <link rel="stylesheet" href="./css/normalize.css">
  <title>Zelda: Ocarina of Time Sounds</title>
</head>

<body>


  <section id="keys" aria-label="Zelda Sounds" role="region">
    <button  data-key="65" class="sound" class="key" aria-label="Key A">A<aside>Hey! Over Here!</aside></button>
    <button  data-key="83" class="sound" class="key" aria-label="Key S">S<aside>Link, Listen!</aside></button>
    <button  data-key="68" class="sound" class="key" aria-label="Key D">D<aside>Gold Skulltula</aside></button>
    <button  data-key="70" class="sound" class="key" aria-label="Key F">F<aside>Item Found!</aside></button>
    <button  data-key="71" class="sound" class="key" aria-label="Key G">G<aside>Silver Rupee</aside></button>
    <button  data-key="72" class="sound" class="key" aria-label="Key H">H<aside>Found a Heart!</aside></button>
  </section>

  <script src="js/main.js" type="module" defer></script>
</body>

</html>