'New text not showing up

I made a Quotes generator website, Which uses an API. When I click Generate Quote it is just stuck on loading How can I fix it?

function randomQuote(){
    quoteBtn.classList.add("loading");
    quoteBtn.innerText = "Loading Quote...";
    fetch("http://api.quotable.io/random").then(response => response.json()).then(result => {
        quoteText.innerText = result.content;
        authorName.innerText = result.author;
        quoteBtn.classList.remove("loading");
        quoteBtn.innerText = "New Quote";
quoteBtn.addEventListener("click", randomQuote);
    });
}

Also I get this error which I do not know how to fix

index.js:12 Mixed Content: The page at 'https://mrquoter.netlify.app/' was loaded over HTTPS, but requested an insecure resource 'http://api.quotable.io/random'. This request has been blocked; the content must be served over HTTPS.

Also when I run it on my local server it runs fine, But I hosted it on netlify.app and it gives out an error

javascripthtml


Solution 1:[1]

  1. Use a secure endpoint: https://api.quotable.io/random

  2. Perhaps use async/await to make your code easier to parse.

  3. Keep the button outside of the element you're updating.

const button = document.querySelector('button');
const quote = document.querySelector('.quote');

const endpoint = 'https://api.quotable.io/random';

button.addEventListener('click', handleClick, false);

async function handleClick() {
  const response = await fetch(endpoint);
  const data = await response.json();
  quote.textContent = data.content;
}
.quote { margin-top: 1em; }
<button>New quote</button>
<div class="quote"></div>

Solution 2:[2]

You can not mix loading resources from HTTP sources when you have a HTTPS website because it alters the behavior of your HTTPS website (i.e. a secure website is not secure anymore) which opens up for new attack vectors on your HTTPS website as described here.

Solution 3:[3]

You simply need to change the query URL to 'https://api.quotable.io/random' As your website uses HTTPs but you are calling the API with HTTP

HTTPs is a secure version of HTTP

You can find more about HTTP & HTTPs Here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andy
Solution 2
Solution 3 kushagra-aa

Related Questions