API не отображается при клике

Question

Я хотел бы получать данные из API по клику. Я создаю jQuery функцию, которая выглядит следующим образом. Когда я нажимаю на кнопку, ничего не происходит, и инспектор не показывает никаких ошибок. Есть ли что-то, чего мне не хватает в js коде? HTML

<button id="cryptobtn" onclick="">Crypto</button>

  $("#cryptobtn").on("click",function(e){
    e.preventDefault();

    let url = "https://newsapi.org/v2/everything?q=bitcoin&from=2020-04-01&to=2020-04-20&apiKey=KEYHERE";
    $.ajax({
      url:url, 
      method: "GET", 
      dataType: "Json",

      beforeSend: function(){
        $(".progress").show();
      },

      complete: function(){
        $(".progress").hide();
      },

      success: function(news){
        let output = "";
        let latestNews = news.articles;
        for(var i in latestNews) {
          output +=`
            <div class="col">
              <div class="card-content">
              <h5><a href="${latestNews[i].url}">${latestNews[i].title}</a></h5>
              </div>
              </div>
              <div class="published">
              <h6>${latestNews[i].publishedAt}</h6>
              </div>
              <div class"card-reveal">
              <p>${latestNews[i].description}</p>
            </div>
          `;
        }
        if(output !== ""){
          $("#newsResults").html(output);
        }

      },

      error: function(){
        $("#newsResults").html("Some error occured");
      }
    })
  });
}); ```

Answer 1

После добавления apikey (сгенерированного с веб-сайта), добавления функции готовности (в ожидании загрузки dom)

ваш код работает хорошо, см. Ниже фрагмент

ps (не используйте клавишу ниже, он просто используется для фрагмента)

создать новый ключ здесь

$(function() {
  $("#cryptobtn").on("click", function(e) {
    e.preventDefault();
    let url = "https://newsapi.org/v2/everything?q=bitcoin&from=2020-04-01&to=2020-04-20&apiKey=6f2fb6cc764449db9c12a604ad2aac35";
    $.ajax({
      url: url,
      method: "GET",
      dataType: "Json",

      beforeSend: function() {
        $(".progress").show();
      },

      complete: function() {
        $(".progress").hide();
      },

      success: function(news) {
        console.log("success");
        let output = "";
        let latestNews = news.articles;
        for (var i in latestNews) {
          output += `
            <div class="col">
              <div class="card-content">
              <h5><a href="${latestNews[i].url}">${latestNews[i].title}</a></h5>
              </div>
              </div>
              <div class="published">
              <h6>${latestNews[i].publishedAt}</h6>
              </div>
              <div class"card-reveal">
              <p>${latestNews[i].description}</p>
            </div>
          `;
        }
        if (output !== "") {
          $("#newsResults").html(output);
        }

      },

      error: function(e) {
        console.log(e);
        $("#newsResults").html("Some error occured");
      }
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="cryptobtn" onclick="">Crypto</button>
<div id="newsResults"></div>