防止在页面加载时执行JS函数
[英]Prevent executing JS function on page load
问题描述
I'm trying to execute foo function when a button is clicked, how can I prevent running scripts onload, sorry for this question, here's an interactive code, my goal is run the function after button click and then display some divs with data. 
我试图在单击按钮时执行foo函数，如何防止加载脚本运行，对此问题感到抱歉，这是一个交互式代码，我的目标是在单击按钮后运行该函数，然后显示一些包含数据的divs 。 Thanks! 谢谢！
<html> <head> <title>Bitcoin Price</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> </head> <body> <h1 id="name"></h1> <p id="cointime"></p> <div id="dollar"></div> <div id="gbp"></div> <div id="euro"></div> <h6 id="disc" style="width:50%"></h6> <br> <button style="width: 200px" onclick="foo()">Load Data</button> <script> $.getJSON( "https://api.coindesk.com/v1/bpi/currentprice.json", function foo(data) { $("#name").append(data.chartName); $("#cointime").append(data.time.updated); $("#dollar").append(data.bpi.USD.rate + ' ' + data.bpi.USD.symbol); $("#gbp").append(data.bpi.GBP.rate + ' ' + data.bpi.GBP.symbol); $("#euro").append(data.bpi.EUR.rate + ' ' + data.bpi.EUR.symbol); $("#disc").append(data.disclaimer); } ) </script> </body> </html>
1 个解决方案
解决方案1
3 已采纳 2017-08-21 17:52:14
Wrap the getJSON call into a function, eg refresh , and call the refresh function when clicking the button. 将getJSON调用包装到一个函数中，例如refresh ，然后在单击按钮时调用refresh函数。
<html> <head> <title>Bitcoin Price</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> </head> <body> <h1 id="name"></h1> <p id="cointime"></p> <div id="dollar"></div> <div id="gbp"></div> <div id="euro"></div> <h6 id="disc" style="width:50%"></h6> <br> <button style="width: 200px" onclick="refresh()">Load Data</button> <script> function refresh () { $.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) { $("#name").append(data.chartName); $("#cointime").append(data.time.updated); $("#dollar").append(data.bpi.USD.rate + ' ' + data.bpi.USD.symbol); $("#gbp").append(data.bpi.GBP.rate + ' ' + data.bpi.GBP.symbol); $("#euro").append(data.bpi.EUR.rate + ' ' + data.bpi.EUR.symbol); $("#disc").append(data.disclaimer); }) } </script> </body> </html>
I'd suggest to not mix the HTML with JavaScript, but use addEventListener in the JavaScript side to add the events: 我建议不要将HTML与JavaScript混合使用，而应在JavaScript端使用addEventListener来添加事件：
<html> <head> <title>Bitcoin Price</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> </head> <body> <h1 id="name"></h1> <p id="cointime"></p> <div id="dollar"></div> <div id="gbp"></div> <div id="euro"></div> <h6 id="disc" style="width:50%"></h6> <br> <button style="width: 200px" id="refreshBtn">Load Data</button> <script> document.getElementById("refreshBtn").addEventListener("click", function () { $.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) { $("#name").append(data.chartName); $("#cointime").append(data.time.updated); $("#dollar").append(data.bpi.USD.rate + ' ' + data.bpi.USD.symbol); $("#gbp").append(data.bpi.GBP.rate + ' ' + data.bpi.GBP.symbol); $("#euro").append(data.bpi.EUR.rate + ' ' + data.bpi.EUR.symbol); $("#disc").append(data.disclaimer); }) }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.