Javascript fetch（）在按钮上的eventlistener激活之前启动-Chuck Norris API_Javascript_Html_Fetch

Javascript fetch（）在按钮上的eventlistener激活之前启动-Chuck Norris API

javascript html

Javascript fetch（）在按钮上的eventlistener激活之前启动-Chuck Norris API,javascript,html,fetch,Javascript,Html,Fetch,这很奇怪，我错过了什么我试图让这个API发送给我一个按钮点击随机Chuck Norris报价然而，只要我刷新页面，我就会得到一个新的报价。我只想在我提交/点击按钮后，它为我提供一个新的报价请参见以下HMTL和JS： <body> <div> <button id="xxx"> GET A CHUCK QUOTE</button> <h1 id="chuck-quote"></h1> &l

这很奇怪，我错过了什么

我试图让这个API发送给我一个按钮点击随机Chuck Norris报价

然而，只要我刷新页面，我就会得到一个新的报价。我只想在我提交/点击按钮后，它为我提供一个新的报价

请参见以下HMTL和JS：

<body>

  <div>

    <button id="xxx"> GET A CHUCK QUOTE</button>

    <h1 id="chuck-quote"></h1>

  </div>


<script>

const chuck_button = document.getElementById('xxx');

chuck_button.addEventListener('click', function () {

  fetch('https://api.chucknorris.io/jokes/random') 
    .then(response =>  {
      return response.json();
    }).then( data => {
      const chuck_quote = document.getElementById('chuck-quote');
      chuck_quote.innerHTML = JSON.stringify(data.value);
    })
  }());

</script>

</body>

删除行}；中的；。否则将直接调用该函数。

您在设置addEventListener函数时正在调用它，我删除了，它工作正常

const chuck_button=document.getElementById'xxx'； chuck_按钮。添加EventListener“单击”功能{ 取回https://api.chucknorris.io/jokes/random' .thenresponse=>{ return response.json； }.thendata=>{ const chuck_quote=document.getElementById'chuck-quote'； chuck_quote.innerHTML=JSON.stringifydata.value； } }; 得到一个恰克的报价

我猜Chuck Norris可以在没有任何请求的情况下发送引号，而Schuck Norris知道何时会事先请求他的引号，并首先发送它们，然后接收请求：正如您所知，这是因为您使用的语法。它被称为一个函数，在定义一个函数后会立即运行或调用它。我想这里的“注释”部分会爆炸。@Dan lol我只是没有看到有人提到为什么会发生这种情况的“技术”术语-想确保你有可靠的事情要做，除了移除-好吧，到底是什么？