Facing error "Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')" while connecting to Ethereum wallet

cryptoshuriken 0
Viewed 20

I'm creating a simple front-end for my dapp with Solidity in backend.

While doing so, I'm trying to create a button using Javascript to connect to Metamask wallet.

Here's my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FundMe Dapp</title>
  </head>
  <body>
    Fund Me!
    <button id=""connectButton" onClick="connect()">Connect Wallet</button>
 

    <script>
        async function connect() {
            if(typeof window.ethereum !== "undefined") {
                try {
                    await ethereum.request({ method:'eth_requestAccounts' })
                    } catch (error) {
                      console.log(error)
                    }
                
                document.getElementById("connectButton").innerHTML = "Connected!"
            } else {
                document.getElementById("connectButton").innerHTML = "Please install Metamask!"
            }
        }
    </script>
       
  </body>
</html>

When I click on the "Connect Wallet" button, I'm having this error in the console: Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML') at connect (index.html:22:68)

So, there seems to be an error in this line of code: document.getElementById("connectButton").innerHTML = "Connected!"

What am I doing wrong? Please let me know.

Thanks!

dom javascript innerhtml
1 Answers

You have an extra ". Make the following change.

<button id=""connectButton" onClick="connect()">

to

<button id="connectButton" onClick="connect()">
Shri Hari L0
Related