How to fetch data by clicking element

Question

I would like to fetch data by clicking button.

current My work is like below code.

Are there any way to bind this?

Thanks

var apikey="https://opentdb.com/api.php?amount=1&type=multiple";

fetch(apikey)
  .then(response => response.json())
  .then(json => {
        console.log(json);
  });

<button type="button">get data</button>

score 0 · Accepted Answer · answered May 02 '20 at 14:37

You can add an event listener on the click of the button which uses your code:

document.getElementById('btn').addEventListener('click', function(){
     var apikey="https://opentdb.com/api.php?amount=1&type=multiple";
     fetch(apikey)
          .then(response => response.json())
          .then(json => {
               console.log(json);
          });
})

<button id="btn" type="button">get data</button>

score 0 · Answer 2 · answered May 02 '20 at 14:39

bind on click function.

async function fetchData(){
    var apikey="https://opentdb.com/api.php?amount=1&type=multiple";

    let data =  await fetch(apikey)
      .then(response => response.json());
      
    console.log(data);
}

<button type="button" onclick="fetchData()">get data</button>

How to fetch data by clicking element

2 Answers2