按钮无法关联JavaScript代码：随机名言生成器故障求助

你的代码存在三个关键问题，导致按钮无法正常触发名言切换：

• 变量名不匹配：你通过document.querySelector获取了.quote和.source元素，分别存在quoteId和authorId变量里，但点击事件中却使用了未定义的quote和source变量，自然无法修改页面内容。
• randomNum函数无返回值：函数内仅执行了Math.floor(Math.random() * quotes.length)，但没有用return返回结果，调用时会得到undefined，无法正确获取数组中的名言和作者。
• 潜在的DOM加载顺序问题：如果JS代码写在HTML结构之前，浏览器执行JS时按钮元素还未渲染，btn会是null，绑定点击事件会直接报错。

修正后的完整代码 #

JavaScript代码

let quotes = ['The greatest glory in living lies not in never falling, but in rising every time we fall.', 'The way to get started is to quit talking and begin doing.', 'If life were predictable it would cease to be life, and be without flavor.', 'Life is what happens when youre busy making other plans.', 'Spread love everywhere you go. Let no one ever come to you without leaving happier.'];
let author = ['Nelson Mandela', 'Walt Disney', 'Eleanor Roosevelt', 'John Lennon', 'Mother Teresa'];

// 确保DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  const quoteEl = document.querySelector('.quote');
  const authorEl = document.querySelector('.source');
  const btn = document.getElementById('loadQuote');

  btn.addEventListener('click', function() {
    const randomIndex = randomNum();
    // 使用同一个随机索引，保证名言和作者对应
    quoteEl.textContent = quotes[randomIndex];
    authorEl.textContent = author[randomIndex];
  });

  function randomNum() {
    // 返回生成的随机索引
    return Math.floor(Math.random() * quotes.length);
  }
});

HTML代码（无需修改，确保JS放在body末尾或用DOMContentLoaded包裹即可）

<div id="quote-box">
  <p class="quote">You can do anything but not everything</p>
  <p class="source">David Allen<span class="citation">Making It All Work</span><span class="year">2009</span></p>
</div>
<button id="loadQuote">Show another quote</button>

额外优化说明 #

• 变量名改为quoteEl和authorEl，更清晰表达变量用途；
• 只调用一次randomNum()并保存结果，避免出现名言和作者不匹配的情况；
• 用DOMContentLoaded事件包裹代码，彻底解决DOM加载顺序问题，无论JS放在页面哪个位置都能正常运行。

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