JavaScript如何点击按钮从对象数组中随机抽取名言并展示到div

第一步：给现有HTML元素添加唯一ID，方便JS定位操作 #

修改后的HTML结构如下：

<!-- 给触发按钮添加ID -->
<button id="fetchQuoteBtn">获取新名言！</button>
<hr>
<!-- 给名言内容、作者展示标签分别添加ID -->
<p id="quoteText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="quoteAuthor">John Doe</p>

第二步：补全JS逻辑，实现随机抽取+页面更新功能 #

你原有代码的名言数组缺少闭合的]，补全后添加事件绑定逻辑即可，完整JS代码如下：

const allQuotes = [
  {   
    qid: 1,
    quote: "Quote 1",
    auth: "ABC DEF"
  },
  {       
    qid: 2,
    quote: "Quote 2",
    auth: "XYZ ABC"
  },
  {       
    qid: 3,
    quote: "Quote 3",
    auth: "XYZ ABC"
  },
  {       
    qid: 4,
    quote: "Quote 4",
    auth: "XYZ ABC"
  },
  {       
    qid: 5,
    quote: "Quote 5",
    auth: "XYZ ABC"
  },
  {   
    qid: 6,
    quote: "Quote 6",
    auth: "XYZ ABC"
  }
]

// 获取页面元素
const quoteTextEl = document.getElementById('quoteText')
const quoteAuthorEl = document.getElementById('quoteAuthor')
const fetchQuoteBtn = document.getElementById('fetchQuoteBtn')

// 给按钮绑定点击事件
fetchQuoteBtn.addEventListener('click', function() {
  // 生成0到数组长度-1的随机整数作为数组下标
  const randomIndex = Math.floor(Math.random() * allQuotes.length)
  // 取出随机的名言对象
  const targetQuote = allQuotes[randomIndex]
  // 更新页面展示内容
  quoteTextEl.innerText = targetQuote.quote
  quoteAuthorEl.innerText = targetQuote.auth
})

可选优化：避免连续抽到同一条名言 #

如果需要避免连续点击出现相同内容，可以增加变量记录上一次的下标，重复则重新生成：

let lastQuoteIndex = -1
fetchQuoteBtn.addEventListener('click', function() {
  let randomIndex
  // 重复则重新生成随机下标
  do {
    randomIndex = Math.floor(Math.random() * allQuotes.length)
  } while(randomIndex === lastQuoteIndex)
  lastQuoteIndex = randomIndex
  const targetQuote = allQuotes[randomIndex]
  quoteTextEl.innerText = targetQuote.quote
  quoteAuthorEl.innerText = targetQuote.auth
})

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