Javascript 从api onclick加载数据

我正在尝试制作一个简单的应用程序。我想在屏幕上显示引号，我正在使用api获取它们。我正在使用fetch获取API数据

现在，当窗口加载时，一切正常，但我想让按钮在每次有人点击该按钮时获得新报价，但我无法让它工作

这是我的原始代码：

fetch('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=', {
  cache: "no-cache"
})
  .then(response => response.json())
  .then(function(data) {
    console.log(data);

    data.filter(key => {

      let quote = document.getElementById('quote');
      let author = document.getElementById('author');

      quote.innerHTML = key.content;
      author.innerHTML = key.title;

    });

  })
  .catch(function(error) {
    // If there is any error you will catch them here
    console.log(error);
  });

要在单击时加载引号，我尝试了以下操作：

const newQuote = document.getElementById('newQuote')
 newQuote.addEventListener('click', _ => {
   fetch('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=', {
    mode: 'no-cors'
   })
    .then(response => response.json())
    .then(data => {
      data.filter(key => {
          let quote = document.getElementById('quote')
          quote.innerHTML = key.content
      })
    })
    .catch(err => console.error(err))
 })

那么伙计们，我能用点击事件让它工作吗？？这是JSBin，您可以更好地了解我的问题：

---

在新代码中使用fetch API调用时，请关闭缓存。。。。我想应该可以了。

我已经改变了处理这个问题的方法。问题之一是没有使用cors模式

以下是任何感兴趣的人的解决方案：

function getQuote() {
  fetch("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + Math.random())
    .then(response => response.json())
    .then(function(data) {
      console.log(data);

      data.filter(key => {

        let quote = document.querySelector(".quote");
        let author = document.querySelector(".author");
        let cleanQuote = key.content.replace(/<\/?p[^>]*>/g, ''); // This way we remove <p> tag from quote (api has quotes with p tags)

        let share = 'https://twitter.com/home?status=' + cleanQuote + ' Author: ' + key.title;
        console.log(share)

        quote.innerHTML = key.content;
        author.innerHTML = key.title;

        document.getElementById('twitterShare').href=share;
      });

    })
    .catch(function(error) {
      // If there is any error you will catch them here
      console.log(error);
    });
}

const newQuote = document.getElementById('newQuote')
newQuote.addEventListener('click', getQuote); // new quote on button click
window.onload = getQuote; // new quote on page load

---

也许编写回调时没有使用胖箭头，可能会丢失this@HolyMoly试过了，但没用。好吧，让我们调试一下……当你控制台记录API响应时，你看到引号了吗？您是否已验证文档是否正确捕获了HTML元素。getElementById'newQuote'？为什么在API的url之前有前导//而不是http://之类的东西？你有控制台。记录数据吗？控制台中有错误吗？@HolyMoly是的，你可以再次检查JSBin并将第一段代码粘贴到JS中，你将看到数据加载。当我得到console.log api响应时，我得到了包含数据的json，如果您使用我的第一个代码段，您也可以看到。我使用了，因为我认为CORS可能是个问题。我使用jQuery的$.ajax调用来进行调用，它很有效。似乎API不喜欢fetch。。。。。我已经附加了jsbin，每次单击按钮时，它都会记录一个新的报价。祝你好运我不知道为什么fetch不起作用……我真的很想解决这个问题，而不是使用JQ，我最终做到了。谢谢你的帮助