如何在 html 代码中使用 javascript function
[英]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.
大家好，我是 javascript/html 的新手，我在将 js 文件“login1”的 function 召回到 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.我使用相同的 function 直接写入 html 并且它可以工作然后我想问题是 html 和 js 之间的连接。 The problem is the login1 function the login() function inside the html is correct and it works.问题是 html 内的 login1 function login() function 是正确的，并且可以正常工作。 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 个解决方案
解决方案1
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:要在 HTML 中使用 javascript 文件，您需要通过脚本标签将其导入，如下所示：
<script type="text/javascript" src="my_javascript.js"></script>
This is usually done at the beginning of the HTML, in the head element.这通常在 HTML 开头的头部元素中完成。 Note that the value for the "src" attribute will be relative to your HTML.请注意，“src”属性的值将与您的 HTML 相关。 In the example above, it is assumed that the.js file is in the folder as the html.在上面的示例中，假设 .js 文件位于 html 文件夹中。
解决方案2
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;它的 getElementById not.getElementbyId 更改这些行，看看它是否有效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'将小写“byId”更改为“ByID”
解决方案3
0 2022-01-05 21:48:13
You can make some changes like this, you have no problem with external JS你可以像这样做一些改变，你对外部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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在javascript中的函数中使用函数 - how to use a function inside a function in javascript
如何在 html 标签内使用 javascript 变量 - how to use a javascript variable inside html tag
如何在javascript中的html表中使用CSS - How to use CSS in html table inside javascript
如何在HTML textarea框内将JavaScript函数的输出用作字符串？ - How can I use the output of a JavaScript function as a string inside a HTML textarea box?
如何在PHP echo函数中使用javascript？ - How to use javascript inside a PHP echo function?
如何在JavaScript函数中使用HTML形式的值 - How to use values in HTML form in javascript function
如何在 html 中使用外部 javascript 函数 - How to use an external javascript function in html
如何在Javascript中使用require函数？ - How to use require function inside a Javascript?
如何在javascript中的函数内使用全局变量？ - how to use a global variable inside a function in javascript?
如何在 JavaScript 中使用 unescape() function？ - How to use unescape() function inside JavaScript?
相关标签