Want hide the image

Kaisanz · December 26, 2022, 1:23pm

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").hide();

}

init();`Preformatted text`

anyone can help me because went i coding the image is not hidePreformatted text

cryptokid · September 27, 2021, 6:38am

Hi,
I don’t understand exactly what part doesn’t work, you didn’t paste the entire HTML code.

Kaisanz · September 27, 2021, 6:39am

<!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

Kaisanz · September 27, 2021, 6:43am

went i click sign with metamask the metamask wallet like not detect

cryptokid · September 27, 2021, 7:52am

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">

Kaisanz · September 28, 2021, 4:08am

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>

Kaisanz · September 28, 2021, 4:09am

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();

cryptokid · September 28, 2021, 5:24am

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();
    }

Kaisanz · September 28, 2021, 9:03am

just pick one of this or what sorry dont understand

cryptokid · September 28, 2021, 9:05am

first one is what you have, second one is a modified version of what you have, mainly to renderGame() only when user is defined.

Kaisanz · September 29, 2021, 1:58am

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

cryptokid · September 29, 2021, 5:29am

It looks like you forgot a } here before catch:

    } else {  

    renderGame();

} catch (error) {

Kaisanz · September 29, 2021, 8:10am

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?

Kaisanz · September 29, 2021, 8:11am

<!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">

cryptokid · September 29, 2021, 8:23am

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>

Kaisanz · September 29, 2021, 9:01am

still same or i need active server first?

Kaisanz · September 29, 2021, 9:02am

sorry because i still blur

cryptokid · September 29, 2021, 9:07am

What you expect to see and you don’t see?

cryptokid · September 29, 2021, 9:11am

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.

Kaisanz · September 29, 2021, 9:20am

i mean do i need active this first?