I'm working on a project where I have written quite a few functions. When I run just the code that's in them (no function) it works. But when I plug the code into a function and call that function from an HTML button. It throws an error.

Here is the code for my button:

<button id="send" onclick="generateKeyPair()">Generate Random Key Pair</button>

And here is the code for the generateKeyPair() function:

                function generateKeyPair() {
                    var keyPair = web3.eth.accounts.create();
                    document.getElementById('privateKey').innerHTML = keyPair.privateKey;
                    document.getElementById('generatedAddress').innerHTML = keyPair.address;
                }

Finally, here is the error

Uncaught ReferenceError: generateKeyPair is not defined
at HTMLButtonElement.onclick

If this is in anyway helpful, I am using some packages, but all things I have used fine before.