Marco Fioravanti
Marco Fioravanti

Reputation: 13

How to use javascript function inside an html codeo

Hello guys I'm new on javascript/html and I have a problem recalling a function of the js file "login1" into html. I use the same function wrote directly into html and it works then I suppose the problem would be the connection between html and js. The problem is the login1 function the login() function inside the html is correct and it works. Can you help me? Thanks in advance

/** Connect to Moralis server */
const serverUrl = "https://oqujb5obipqi.usemoralis.com:2053/server";
const appId = "oNQDkHuT1BjaQBFTYkBZFc7EyGHdH0RF0rcG2pix";
Moralis.start({ serverUrl, appId });

/** Add from here down */
async function login1(){
  console.log("login clicked");
  var user = await Moralis.Web3.authenticate();
  if(user){
    console.log(user);
    user.set("nickname","VITALIK");
    user.set("fav_color","blue");
    user.save();
  }
}


function openModal(){
  document.getElementById("token_modal").style.display = "block";
}

document.getElementbyId("from_token_select").onclick =openModal;
document.getElementbyId("to_token_select").onclick =openModal;



async function logOut() {
  await Moralis.User.logOut();
  console.log("logged out");
}




document.getElementById("login_button").onclick = login1;
document.getElementById("logout_button").onclick = logOut;

/** Useful Resources  */

// https://docs.moralis.io/moralis-server/users/crypto-login
// https://docs.moralis.io/moralis-server/getting-started/quick-start#user
// https://docs.moralis.io/moralis-server/users/crypto-login#metamask

/** Moralis Forum */

// https://forum.moralis.io/
<!DOCTYPE html>

<html>

  <head>
    <meta charset= "utf-8">
    <meta name="viewport" content="width=500px, initial-scale=1,shrink-to-fit=no">
    <title>JIMMYDEX</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href= "./style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>


  </head>

  <body>

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
          <img src="\img\logo1.jpg" width="100" height="100" alt="">
          JIMMIDEX
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">POOL <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">NFT</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">DERIVATIVES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <button id = "login_button" class = "btn btn-outline-primary my-2 my-sm-0" type="submit">Login1 with Metamask</button>
            <button onclick="login()" class = "btn btn-outline-primary my-2 my-sm-0">Login with Metamask</button>
        </div>
      </nav>


    <div class = "container">
      <div class = "row">
         <div class = "col col-md-6 offset-md-3" id= "window" >
            <h4>Swap</h4>
            <div id="form">
                <div class = "swapbox">
                  <div class = "swapbox_select  token_select" id= "from_token_select">
                    ETH

                  </div>
                  <div class = "swapbox_select">
                        <input class= "number form-control" placeholder = "amount" id = "from_amount">

                  </div>
                  <div class = "swapbox">
                    <div class = "swapbox_select  token_select" onclick="openModal()">
                      TOKEN SELECT

                    </div>
                    <div class = "swapbox_select">
                          <input class= "number form-control" placeholder = "amount" id = "to_amount">

                    </div>
                  </div>

                  <button class = "btn btn-large btn-primary btn-block" id = "swap_button">
                    swap
                  </button>
                  </div>

          </div>
        </div>
      </div>
    </div>




    <div class="modal" id = "token_modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Select token</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
        </div>
      </div>
    </div>


    <script>
        Moralis.initialize("oNQDkHuT1BjaQBFTYkBZFc7EyGHdH0RF0rcG2pix"); // Application id from moralis.io
        Moralis.serverURL = "https://oqujb5obipqi.usemoralis.com:2053/server"; //Server url from moralis.io

        async function login(){
            console.log("login clicked");
            var user = await Moralis.Web3.authenticate();
            if(user){
                console.log(user);
                user.set("nickname","VITALIK");
                user.set("fav_color","blue");
                user.save();
            }
        }

    </script>

    <script>
    function openModal(){
      document.getElementById("token_modal").style.display = "block";
    }
    </script>

    <script type="text/javascript" src="./main.js"></script>
  </body>


</html>

Upvotes: 1

Views: 73

Answers (3)

gkyrvaggelis
gkyrvaggelis

Reputation: 1

It's getElementById not getElementbyId. Change these lines see if it works:

document.getElementbyId("from_token_select").onclick =openModal;
document.getElementbyId("to_token_select").onclick =openModal;

Change the lower case byId to ByID.

Upvotes: 0

Joelnbl
Joelnbl

Reputation: 36

You can make some changes like this, you have no problem with external JS

/** Connect to Moralis server */
const serverUrl = "https://oqujb5obipqi.usemoralis.com:2053/server";
const appId = "oNQDkHuT1BjaQBFTYkBZFc7EyGHdH0RF0rcG2pix";
Moralis.start({ serverUrl, appId });

/** Add from here down */
async function login1() {
  console.log("login clicked");
  var user = await Moralis.Web3.authenticate();
  if (user) {
    console.log(user);
    user.set("nickname", "VITALIK");
    user.set("fav_color", "blue");
    user.save();
  }
}

function openModal() {
  document.getElementById("token_modal").style.display = "block";
}

document.getElementById("from_token_select").onclick = openModal;

async function logOut() {
  await Moralis.User.logOut();
  console.log("logged out");
}

document.getElementById("login_button").onclick = login1;

/** Useful Resources  */

// https://docs.moralis.io/moralis-server/users/crypto-login
// https://docs.moralis.io/moralis-server/getting-started/quick-start#user
// https://docs.moralis.io/moralis-server/users/crypto-login#metamask

/** Moralis Forum */

// https://forum.moralis.io/
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=500px, initial-scale=1,shrink-to-fit=no"
    />
    <title>JIMMYDEX</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./style.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">
        <img src="\img\logo1.jpg" width="100" height="100" alt="" />
        JIMMIDEX
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >POOL <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">NFT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">DERIVATIVES</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <button
          id="login_button"
          class="btn btn-outline-primary my-2 my-sm-0"
          type="submit"
        >
          Login1 with Metamask
        </button>
        <button onclick="login()" class="btn btn-outline-primary my-2 my-sm-0">
          Login with Metamask
        </button>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <div class="col col-md-6 offset-md-3" id="window">
          <h4>Swap</h4>
          <div id="form">
            <div class="swapbox">
              <div class="swapbox_select token_select" id="from_token_select">
                ETH
              </div>
              <div class="swapbox_select">
                <input
                  class="number form-control"
                  placeholder="amount"
                  id="from_amount"
                />
              </div>
              <div class="swapbox">
                <div class="swapbox_select token_select">
                  TOKEN SELECT
                </div>
                <div class="swapbox_select">
                  <input
                    class="number form-control"
                    placeholder="amount"
                    id="to_amount"
                  />
                </div>
              </div>

              <button
                class="btn btn-large btn-primary btn-block"
                id="swap_button"
              >
                swap
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal" id="token_modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Select token</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="./main.js"></script>

  </body>
</html>

Upvotes: 0

tutiplain
tutiplain

Reputation: 1480

To use a javascript file inside HTML, you need to import it via a script tag, like this:

<script type="text/javascript" src="my_javascript.js"></script>

This is usually done at the beginning of the HTML, in the head element. Note that the value for the "src" attribute will be relative to your HTML. In the example above, it is assumed that the .js file is in the folder as the html.

Upvotes: 1

Related Questions