CODEWITHSUNDEEP
javascripthtmlnullmicrosoft-edge
Andre Soeiro
Andre Soeiro

Reputation: 37

Method document.getElementById() returns '(null)' only in Edge

I've been googling this for a long time and found no answer.

The following site is working well in Firefox and Chrome. In Edge, it does not.

http://afos.ml/week01/

It is supposed to make the user interface available to you only if you connect a crypto wallet. If not, you won't be allowed to interact with it.

What I have seen?

The problem is in JavaScript's document.getElementById("elementName"). In all browsers, but in M$ Edge, it returns the elements fine and I am able to tweak the controls.

In Edge, the function returns (null) to that call.

Anyone has a clue to how I solve it?

Here is the code of the HTML file:

<html lang="en">
  <head>
    <title>Road to Web3 - Week 01 - Develop an NFT Contract.</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
    <script src="FileUtils.js"></script>
    <script src="WalletUtils.js"></script>
    <script src="SmartPlug.js"></script>
    <script src="interfaceScripts.js"></script>
    <!--
    <script>
      import *  as IfaceThings from "./interfaceScriptsUsingImport.JS";
    </script> -->
    <style>
      p {
          margin-left: 2%;
          margin-right: 2%;
      }
      .center {
        margin: auto;
        width: 60%;
        /* border: 3px solid #73AD21; */
        padding: 10px;  
      }
   </style>
  </head>
<body>
 <p align = "right">
  <button id="connectionButton">Is wallet connected?</button>
</p>
  <div id = "siteGreetingDiv">
    <h1><p align = "center">Road to Web 3 - Week 01</p></h1>
    <h2><p align = "center">Develop an NFT Contract</p></h2>
    <h3><p align = "center" id = "WelcomeParagraph">Welcome, visitor!</p></h3>
  </div>
  <br/>
  <div id = "unknownUser" class="center">
    <p>To interact with the deployed smart contract, please connect to a wallet.</p>
  </div>
  <div id = "loggedUI" class = "center">
  <label for = "userName">Set or change your user name:</label>
  <input type="text" id="userName" name="userName">
  <button onclick="setNewUsername()">
    Set New Username
  </button>
  <br/>
  <p align = "justify" id = "setUserNameResults"></p>
  <button onclick="getMintedAmount()">
    Check amount of minted NFTs
  </button>
  <p align = "justify" id = "getMintedAmountResults">
    How many NFTs has the user minted?<br /></p>
  <br/>
  <label for = "metadataUrl">Enter the 'metadata.json' url:</label>
  <input type="text" id="metadataUrl" name="metadataUrl">
  <button onclick="mintAnNFT()">
    Mint NFT
  </button>
  <p align = "justify" id = "mintedNFTResults"><br /></p>
  <br/>
</div>
</body>
</html>

Here is my javascript code that iteracts with it and returns 'null' for the 'getElementById's only in MS Edge (a piece of the interfaceScripts.js file:

async function startDapp() {
    const walletStatus = await isWalletConnected();
    const connectionButton = document.getElementById("connectionButton");
    const loggedUI = document.getElementById("loggedUI");
    const unknownUser = document.getElementById("unknownUser");
    if(walletStatus == "No wallet installed") {
        setEvent(connectionButton, "click", walletInstructions);
        connectionButton.innerHTML = "Why do I need a wallet extension?";
        loggedUI.style.display = "none";
        unknownUser.style.display = "block";
    }
    else if(walletStatus == "Connected") {
        //const account = await ethereum.request({method: 'eth_accounts'});
        const account = await getWalletAddress();
        connectionButton.innerHTML = "[" + account +"]";
        removeEvent(connectionButton, "click", walletInstructions);
        removeEvent(connectionButton, "click", connectToWallet);
        loggedUI.style.display = "block";
        unknownUser.style.display = "none";
    } else { // Disconnected
        removeEvent(connectionButton, "click", walletInstructions);
        setEvent(connectionButton, "click", connectToWallet);
        connectionButton.innerHTML = "Connect to a wallet";
        loggedUI.style.display = "none";
        unknownUser.style.display = "block";
    }
}

// Runs whenever the user changes account state;
// Checking if there is a wallet installed first, of coure!
if (typeof window.ethereum !== 'undefined') {
    window.ethereum.on('accountsChanged', async () => {
        startDapp();
    });
}
startDapp();

Thanks in advance for all help...

Andre Soeiro

Upvotes: 0

Views: 1003

Answers (1)

user3252327
user3252327

Reputation: 627

I do have some errors on chrome as well. It may just not break the page completely. Here you are loading the scripts and running them before you have loaded the html. Usually you would either:

  1. Put your scripts at the end of the page
  2. Or a more elegant solution, add the defer keyword to your script tag (https://www.w3schools.com/tags/att_script_defer.asp) This will load the scripts but only run them after the html is fully loaded.
<script src="FileUtils.js" defer></script>
<script src="WalletUtils.js" defer></script>
<script src="SmartPlug.js" defer></script>
<script src="interfaceScripts.js" defer></script>

Upvotes: 2

Related Questions