How to use javascript function inside an html codeo
Question
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>
3 answers
solution1
0 2022-01-05 21:12:45
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.
solution2
0 2022-01-05 21:43:58
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; document.getElementbyId("from_token_select").onclick =openModal; document.getElementbyId("to_token_select").onclick =openModal;
Change the lower case 'byId' to 'ByID'
solution3
0 2022-01-05 21:48:13
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to use a function inside a function in javascript
how to use a javascript variable inside html tag
How to use CSS in html table inside javascript
How can I use the output of a JavaScript function as a string inside a HTML textarea box?
How to use javascript inside a PHP echo function?
How to use values in HTML form in javascript function
How to use an external javascript function in html
How to use require function inside a Javascript?
how to use a global variable inside a function in javascript?
How to use unescape() function inside JavaScript?
Related Tags