Hi,
I don’t understand exactly what part doesn’t work, you didn’t paste the entire HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Welcome</h1>
</div>
</div>
<div class="container">
<button id="login_button">Sign in with MetaMask</button>
<div id="game">
<div class row>
<div class="col-md-8">
<img src="pet.png" id="pet_img">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
i cannot connect my metamask to website
went i click sign with metamask the metamask wallet like not detect
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Welcome</h1>
</div>
</div>
<div class="container">
<button id="login_button">Sign in with MetaMask</button>
<div id="game">
<div class row>
<div class="col-md-8">
<img src="pet.png" id="pet_img">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<script type="text/javascript">
Moralis.initialize("j5QBLhKESBHccVSawgFX5HiLRxm7BWdIm1gqUwc9"); // Application id from moralis.io
Moralis.serverURL = "https://odtjjiwqgkj8.moralishost.com:2053/server"; //Server url from moralis.
async function init() {
try {
let User = Moralis.User.current();
if(!User){
$("#login_button").click( async () => {
User = await Moralis.Web3.authenticate();
})
}
renderGame();
} catch (error) {
console.log(error);
}
}
function renderGame(){
$("#game").show();
$("#login_button").show();
}
init();
</script>
</body>
</html>
The image error is from <img src="pet.png" id="pet_img">
already copy but still same!
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Welcome</h1>
</div>
</div>
<div class="container">
<button id="login_button">Sign in with MetaMask</button>
<div id="game">
<div class row>
<div class="col-md-8">
<img src="pet.png" id="pet_img">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
Moralis.initialize("hfKetq0CybZQpezveB6vqHLaJeexXw6dNx7lIa6l"); // Application id from moralis.io
Moralis.serverURL = "https://opp6jmpbtqas.moralishost.com:2053/server"; //Server url from moralis.io
async function init() {
try {
let User = Moralis.User.current();
if(!User){
$("#login_button").click( async () => {
User = await Moralis.Web3.authenticate();
})
}
renderGame();
} catch (error) {
console.log(error);
}
}
function renderGame(){
$("#game").show();
$("#login_button").show();
}
init();
I think that I understand now what you wanted to say, try this:
if(!User){ $("#login_button").click( async () => { User = await Moralis.Web3.authenticate(); }) } renderGame();
=>
if(!User){ $("#login_button").click( async () => { User = await Moralis.Web3.authenticate(); }) } else { renderGame(); }
just pick one of this or what sorry dont understand
first one is what you have, second one is a modified version of what you have, mainly to renderGame() only when user is defined.
Moralis.initialize("hfKetq0CybZQpezveB6vqHLaJeexXw6dNx7lIa6l"); // Application id from moralis.io
Moralis.serverURL = "https://opp6jmpbtqas.moralishost.com:2053/server"; //Server url from moralis.
async function init() {
try {
let User = Moralis.User.current();
if(!User){
$("#login_button").click( async () => {
User = await Moralis.Web3.authenticate();
})
} else {
renderGame();
} catch (error) {
console.log(error);
}
}
function renderGame(){
$("#game").show();
$("#login_button").hide();
}
init();
seems like my code have problem can u check it
It looks like you forgot a }
here before catch:
} else { renderGame(); } catch (error) {
Moralis.initialize("hfKetq0CybZQpezveB6vqHLaJeexXw6dNx7lIa6l"); // Application id from moralis.io
Moralis.serverURL = "https://opp6jmpbtqas.moralishost.com:2053/server"; //Server url from moralis.
async function init() {
try {
let User = Moralis.User.current();
if(!User){
$("#login_button").click( async () => {
User = await Moralis.Web3.authenticate();
})
} else {
renderGame();
}
}catch (error) {
console.log(error);
}
}
function renderGame(){
$("#game").show();
$("#login_button").hide();
}
init();
still cannot or i have problem with my html?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Welcome</h1>
</div>
</div>
<div class="container">
<button id="login_button">Sign in with MetaMask</button>
<div id="game">
<div class row>
<div class="col-md-8">
<img src="pet.png" id="pet_img">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<script type="text/javascript">
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Welcome</h1>
</div>
</div>
<div class="container">
<button id="login_button">Sign in with MetaMask</button>
<div id="game">
<div class row>
<div class="col-md-8">
<img src="pet.png" id="pet_img">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<script type="text/javascript">
Moralis.initialize("hfKetq0CybZQpezveB6vqHLaJeexXw6dNx7lIa6l"); // Application id from moralis.io
Moralis.serverURL = "https://opp6jmpbtqas.moralishost.com:2053/server"; //Server url from moralis.
async function init() {
try {
let User = Moralis.User.current();
if(!User){
$("#login_button").click( async () => {
User = await Moralis.authenticate();
console.log("here");
})
} else {
renderGame();
}
}catch (error) {
console.log(error);
}
}
function renderGame(){
$("#game").show();
$("#login_button").hide();
}
init();
</script>
</body>
</html>
still same or i need active server first?
sorry because i still blur
What you expect to see and you don’t see?
By active server you mean a local http server? If that is what you mean, then yes, you have to run a local http server and then to open that html page in the browser by using that local http server.
No, for what you are doing now it should work fine without activating this.