Question

我在单击按钮时尝试执行foo功能，如何阻止运行脚本onload，对不起这个问题，这是一个交互式代码，我的目标是运行单击按钮后功能，然后显示一些divs数据。谢谢！

＆＃13;

<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>

＆＃13;

Answer 1

将getJSON来电包裹到一个功能中，例如refresh，并在点击按钮时调用refresh函数。

＆＃13;

<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>

＆＃13;

我建议不要将HTML与JavaScript混合，但在JavaScript端使用addEventListener添加事件：

＆＃13;

<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>

＆＃13;

阻止在页面加载时执行JS功能

1 个答案: