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

【问题标题】：Link API to a countdown button in order to display quote when timer is clicked to begin将 API 链接到倒计时按钮，以便在单击计时器开始时显示报价
【发布时间】：2020-08-08 19:45:21
【问题描述】：

如果可能的话，我想知道如何将随机报价生成器链接到一个也可以开始倒计时的按钮。我想我已经很接近了，但是缺少某些东西或我滥用了某些东西。我花了很多时间在这里寻找一些类似的问题，但不能完全正确，所以这是我的第一个正确的 StackOverflow 问题，这是我的 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)
        })
     })

这里是用于开始和重置计数器的渲染函数——我相当肯定它缺少一些东西来显示 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}`
        }

我收到一条错误消息：

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

仅作为上下文，这是一个简单的练习应用程序，当点击计时器按钮时，它会生成一个鼓舞人心的报价，当计时器归零时，它会发出叮当声。

【问题讨论】：

标签： javascript syntax

【解决方案1】：

据我所知，您的 newQuote 是一个对象，而您正试图将该对象附加到文档中。您已经有来自端点的响应，它是一个字符串。您需要做的就是显示该字符串。我已经为那部分创建了一个示例，其中我有一个段落来显示响应。

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>

【讨论】：