Issue
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">×</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>Solution
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">×</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>Answered By - Joelnbl
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.