New text not showing up-CodePudding

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

CodePudding user response：

Use a secure endpoint: https://api.quotable.io/random
Perhaps use async/await to make your code easier to parse.
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 ></div>

CodePudding user response：

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.

CodePudding user response：

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