将 API 链接到倒计时按钮，以便在单击计时器开始时显示报价

Question

I would like to know, if it's even possible, how to link a random quote generator to a button that also starts a countdown. I think I am close, but something is missing or Im misusing something. I spent a good deal of time looking on here for some similar questions, but couldn't quite get it right, so here's my first proper StackOverflow question and here is my JS:

//Variables 
let timerInterval
let min, sec, seconds = (300)

//click start button begin  5 min countdown
   
  //FOR THE FIVE MINUTE TIMER
  timerElFive.addEventListener('click', ()=> {
        if(timerInterval){
          clearInterval(timerInterval)
          return timerInterval = null
        }
        console.log(startTimer())
    })
    //FOR THE QUOTE API ON-CLICK OF FIVE MINUTE TIMER
    timerElFive.addEventListener('click', ()=>{
        fetch("https://api.adviceslip.com/advice")
        .then((response) =>{
            return response.json()
        })
        .then((data)=>{
          let newQuote = {}
          newQuote.quote = data.slip.advice
            document.appendChild(newQuote, data)//quotes.push(newQuote)
            render()
        })
        .catch((err)=>{
            console.log(err)
        })
     })

here is the render function which works to begin and reset counter--Im fairly certain its missing something to display the API:

        //five minute render function
    function render() {
        min = Math.floor(seconds / 60) 
        sec = seconds % 60
        if(sec < 10) {
            timerElFive.innerText =`${min}:0${sec}`
        } else {
            timerElFive.innerText = `${min}:${sec}`
        }

I get an error that says:

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at main.js:32

Just for context, this is for a simple practice app that generates an inspirational quote when the timer button is clicked and the timer dings when it gets to zero.

Answer 1

from what i see ur newQuote is an object, and you are trying to append to the document that object. you already have the response from the endpoint, which is a string. all you need to do is to display that string. i've created an example just for that part, in which i have a paragraph where i display the response.

 const timerElFive = document.querySelector('button'); let quoteWrapper = document.querySelector('.quote-wrapper') timerElFive.addEventListener('click', ()=>{ fetch("https://api.adviceslip.com/advice").then((response) =>{ return response.json() }).then((data)=>{ let quote = data.slip.advice; quoteWrapper.innerText = quote; }).catch((err)=>{ console.log(err) }) })

 <button> Click me for quotes </button> <p class="quote-wrapper"> </p>