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 >
<a href="#">
<img src="\img\logo1.jpg" width="100" height="100" alt="">
JIMMIDEX
</a>
<button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="#">POOL <span >(current)</span></a>
</li>
<li >
<a href="#">NFT</a>
</li>
<li >
<a href="#">DERIVATIVES</a>
</li>
<li >
<a 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 id = "token_modal" tabindex="-1" role="dialog">
<div role="document">
<div >
<div >
<h5 >Select token</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<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>CodePudding user response：
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.
CodePudding user response：
Its getElementById not .getElementbyId change those 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'
CodePudding user response：
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 >
<a href="#">
<img src="\img\logo1.jpg" width="100" height="100" alt="" />
JIMMIDEX
</a>
<button
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="#"
>POOL <span >(current)</span></a
>
</li>
<li >
<a href="#">NFT</a>
</li>
<li >
<a href="#">DERIVATIVES</a>
</li>
<li >
<a href="#">Disabled</a>
</li>
</ul>
<button
id="login_button"
type="submit"
>
Login1 with Metamask
</button>
<button onclick="login()" >
Login with Metamask
</button>
</div>
</nav>
<div >
<div >
<div id="window">
<h4>Swap</h4>
<div id="form">
<div >
<div id="from_token_select">
ETH
</div>
<div >
<input
placeholder="amount"
id="from_amount"
/>
</div>
<div >
<div >
TOKEN SELECT
</div>
<div >
<input
placeholder="amount"
id="to_amount"
/>
</div>
</div>
<button
id="swap_button"
>
swap
</button>
</div>
</div>
</div>
</div>
</div>
<div id="token_modal" tabindex="-1" role="dialog">
<div role="document">
<div >
<div >
<h5 >Select token</h5>
<button
type="button"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<p>Modal body text goes here.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>