Prevent executing JS function on page load

Question

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

wrap the code into a function named foo??your foo function is actually anonymous... — Jonas Wilms
– Jonas Wilms, Commented Aug 21, 2017 at 17:51

Ionică Bizău · Accepted Answer · 2017-08-21 18:06:19Z

Wrap the getJSON call into a function, e.g. refresh, and call the refresh function when clicking the button.

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

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

Collectives™ on Stack Overflow

Prevent executing JS function on page load

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related