我在谷歌上搜索了很长时间，但没有找到答案。
以下网站在Firefox和Chrome中运行良好。在Edge中，它没有。
http://afos.ml/week01/
它应该只在连接加密钱包时才为您提供用户界面。如果没有，你将不被允许与它交互。
我看到了什么？
问题出现在JavaScript的document.getElementById("elementName")中。在所有浏览器中，但在M$Edge中，它会很好地返回元素，我可以调整控件。
在Edge中，函数将(null)返回给该调用。
有人知道我是怎么解决的吗？
这是HTML文件的代码：
<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>
这是我的javascript代码，它与之迭代，并仅在MS Edge中为"getElementById"返回"null"(interfaceScripts.js文件的一部分：
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();
提前感谢您的帮助。。。
Andre Soeiro
我在chrome上也有一些错误。它可能只是没有完全破坏页面。在这里，您要加载脚本并在加载html之前运行它们。通常你会：
- 将脚本放在页面末尾
- 或者一个更优雅的解决方案，将defer关键字添加到脚本标记中(https://www.w3schools.com/tags/att_script_defer.asp)这将加载脚本，但仅在html完全加载后才运行它们
<script src="FileUtils.js" defer></script>
<script src="WalletUtils.js" defer></script>
<script src="SmartPlug.js" defer></script>
<script src="interfaceScripts.js" defer></script>