调用名言API获取的作者名在浏览器不显示但控制台正常

问题根源 #

你的代码存在核心逻辑错误：执行quote.innerText = quoteData时，直接替换了整个.quote容器的所有内容——这会把DOM中原有的<span id="author">元素彻底删除。尽管控制台能正常打印authorName（说明API数据获取正常），但此时author变量指向的元素已不在DOM树中，后续的author.innerText = authorName自然无法在页面生效。

修复方案 #

方案1：更新指定元素（推荐）

保留原DOM结构，只更新名言内容和作者文本，不替换整个容器。将quote.innerText = quoteData改为更新已选中的desc元素（对应#content）：

const container = document.querySelector(".container")
const quote = document.querySelector(".quote")
const desc = document.querySelector("#content")
const btn = document.querySelector("#btn")
const author = document.querySelector("#author")

btn.onclick = () => {
    
    const fetchData = async() => {
        
        const url = `https://api.quotable.io/quotes/random`
        const response = await fetch(url)
        const data = await response.json()
        const x = data[0]
    
        const quoteData = x.content
        const authorName = x.author
        // 仅更新名言内容元素
        desc.innerText = quoteData
        author.innerText = authorName
    }
    fetchData()
}

方案2：重新构建容器内容（可选）

如果需要替换整个.quote容器的内容，需确保新内容中包含作者元素：

const container = document.querySelector(".container")
const quote = document.querySelector(".quote")
const desc = document.querySelector("#content")
const btn = document.querySelector("#btn")
const author = document.querySelector("#author")

btn.onclick = () => {
    
    const fetchData = async() => {
        
        const url = `https://api.quotable.io/quotes/random`
        const response = await fetch(url)
        const data = await response.json()
        const x = data[0]
    
        const quoteData = x.content
        const authorName = x.author
        // 重新构建容器内的HTML结构，包含作者元素
        quote.innerHTML = `
            <p id="content">${quoteData}</p>
            <span id="author">${authorName}</span>
        `
    }
    fetchData()
}

效果说明 #

修改后，点击按钮时会正确更新名言内容和作者文本，作者元素持续存在于DOM中，页面即可正常显示作者名称。

内容的提问来源于stack exchange，提问作者Sagar