Index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Index.css">
    </head>
    <body>
        <div class="pentagram">
            <span class="clef treble-clef"></span>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
        </div>

        <div class="pentagram">
            <span class="clef bass-clef"></span>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
        </div>

        <script type="text/javascript" src="Index.js"></script>

        <script>
            let pentagrams = document.querySelectorAll(".pentagram");
            let note = getRandomNote();
            let pentagram = pentagrams[note.pentagram];

            pentagram.appendChild(note.element);

            document.addEventListener("keydown", keyDown);

            function keyDown(e) {
                if (e.key == note.key) {
                    pentagram.removeChild(pentagram.lastChild);
                    note = getRandomNote();
                    pentagram = pentagrams[note.pentagram];
                    pentagram.appendChild(note.element);
                }
            }
        </script>
    </body>
</html>