点击按钮切换名言时触发TypeError错误，请求排查问题

你遇到的错误Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerText')，核心原因是quoteText变量的值为null——也就是说document.querySelector("quote")没有找到匹配的DOM元素。

具体原因及修复方案 #

• 选择器使用错误：document.querySelector("quote")是在查找名为<quote>的HTML标签，但绝大多数场景下，你可能是用class或id来标记名言显示元素：

  • 如果你的HTML元素是 <div class="quote"></div>，需要把选择器改成 .quote（class选择器前缀是点）：

    const quoteText = document.querySelector(".quote")
    

  • 如果你的HTML元素是 <div id="quote"></div>，需要把选择器改成 #quote（id选择器前缀是井号）：

    const quoteText = document.querySelector("#quote")
    

  • 如果你确实用了自定义的<quote>标签，那要确保HTML里存在这个标签，否则依然会返回null。

• 额外优化建议

  1. 给fetch添加错误捕获，避免API请求失败时控制台抛出未处理的Promise错误：

     function randomQuote() {
         fetch("https://api.quotable.io/random")
             .then(res => {
                 if (!res.ok) throw new Error("请求失败");
                 return res.json()
             })
             .then(result => {
                 quoteText.innerText = result.content;
             })
             .catch(err => {
                 console.error(err);
                 quoteText.innerText = "获取名言失败，请重试";
             }); 
     }
     

  2. 确保脚本在DOM加载完成后执行：可以把脚本放在HTML的</body>标签之前，或者用DOMContentLoaded事件包裹代码，避免DOM元素还未渲染就执行查询：

     document.addEventListener('DOMContentLoaded', () => {
         const quoteText = document.querySelector(".quote")
         const quoteBtn = document.querySelector("button")
     
         function randomQuote() {
             // ... 原函数内容
         }
     
         quoteBtn.addEventListener("click", randomQuote);
     })
     

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