javascript - Displaying API information after a button push

Question

So I am trying to display the information for a random quote from an API after they click a button on screen. However, the button displays, and the information is run in the console when it loads on the page, but it does not display on the page at all yet, even though I set it up to display immediately when the page loads. Any ideas on how I can fix this?

const output = (quoteInfo) => {
    quoteInfo.forEach(
        quotes => {
            let article = document.createElement('article');
        
            let anime = document.createElement("h4");
            anime.textContent = quotes.anime;

            let quote = document.createElement("h3");
            quote.textContent = quotes.quote;

            let character = document.createElement("h4");
            character.textContent = quotes.character;

            article.appendChild(anime);
            article.appendChild(quote);
            article.appendChild(character);

            document.querySelector("#quote").appendChild(article);
       }
   
   );
}

const URL = "https://animechan.vercel.app/api/random"
const buttonElement = document.getElementById("submitButton");
fetch("https://animechan.vercel.app/api/random")
    .then(response => response.json())
    .then(quotes => console.log(quotes))

//const reset = () => {
    //document.querySelector("#quote").innerHTML = " ";
    //}

 //buttonElement.addEventListener("click", reset())

标签： javascriptapi

Answer 1

它的Yaboi123，我认为您在脚本中缺少加载到窗口的事件。您可以使用window.addEventListener()采用两个必需参数的方法来做到这一点。第一个是event，第二个是返回值callback的函数。

我假设您的 API 正在返回一个类似这样的数组：

let info = [
    {
        anime: "Fate/zero",
        character: "Rider",
        quote: "To win, but not destroy"
    },
    {
        anime: "Hai to Gensou no Grimgar",
        character: "Shinohara",
        quote: "I understand the pain of losing a comrade."
    }

];

因此，您的output()功能将是这样的：

function output() {
    return info.forEach((pack) => {
        const { anime, character, quote } = pack;  // destructuring
        let article = document.createElement('article');

        let animeElement = document.createElement("h4");
        animeElement.textContent = pack.anime;

        let quoteElement = document.createElement("h3");
        quoteElement.textContent = pack.quote;

        let characterElement = document.createElement("h4");
        characterElement.textContent = pack.character;

        article.appendChild(animeElement);
        article.appendChild(quoteElement);
        article.appendChild(characterElement);

        let quotes = document.getElementById('quotes');
        quotes.appendChild(article);

    });

}

window.addEventListener('load', output);

我希望它对你有用！！

编辑：

如果您想通过单击按钮来显示结果，则需要将代码重构如下：

let info = [
    {
        anime: "Fate/zero",
        character: "Rider",
        quote: "To win, but not destroy; to conquer, but not humiliate: That is what true conquest is!"
    },
    {
        anime: "Hai to Gensou no Grimgar",
        character: "Shinohara",
        quote: "I understand the pain of losing a comrade."
    }

];

function output() {
    info.forEach((pack) => {
        const { anime, character, quote } = pack;  // destructuring
        let article = document.createElement('article');

        let animeElement = document.createElement("h4");
        animeElement.textContent = pack.anime;

        let quoteElement = document.createElement("h3");
        quoteElement.textContent = pack.quote;

        let characterElement = document.createElement("h4");
        characterElement.textContent = pack.character;

        article.appendChild(animeElement);
        article.appendChild(quoteElement);
        article.appendChild(characterElement);

        let quotes = document.getElementById('quotes');
        quotes.appendChild(article);

    });

}
function helper() {

    // button
    let btn = document.getElementById('btn');
    // add event listener to the button which triggered output()
    btn.addEventListener('click', output);
}

window.addEventListener('load', helper);