javascript - 通过单击按钮从数组中的对象获取随机值

Question

当您单击按钮时，我需要从数组中的对象中获取随机字符串。但由于某种原因，我的代码没有执行。

var quotes = [{
    quote: "Quote1",
    source: "Source1"
  },
  {
    quote: "Quote2",
    source: "Source2"
  },
  {
    quote: "Quote3",
    source: "Source3"
  },
  {
    quote: "Quote4",
    source: "Source4"
  },
  {
    quote: "Quote5",
    source: "Source5"
  }
];

function getRandomquote() {
  var randomindex = Math.floor(Math.random() * (quotes.length));
  var quotesarr = quotes[randomindex];
  var objquote = quotesarr.quote;
  var objsource = quotesarr.source;

  document.getElementById("quote").innerHTML = objquote;
  document.getElementById("source").innerHTML = objsource;
}

function printQuote() {
  document.getElementById("loadQuote").onclick = getRandomquote;
}
printQuote();

<div class="container">
  <div id="quote-box">
    <p class="quote"> hello</p>
    <p class="source"> hello</p>
  </div>
  <button id="loadQuote" onclick="printQuote();">Show another quote</button>

我收到此错误消息:

Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement.getRandomquote (randomtest1.js:27)

以下回答后更新

我将 getElementById 更改为 getElementsByClassName，现在没有错误消息了。

但是当我点击按钮时，它并没有改变元素。我相信我在 printQuote 函数上犯了一个错误。我想不通。

Answer 1

您需要将 ID 添加到元素中，如下所示。或使用 getElementsByClassName() 或使用 querySelector(".quote")。

var objquote = "Hello";
var objsource = "World";
document.getElementById("quote").innerHTML=objquote;
document.getElementById("source").innerHTML=objsource;

<div id="quote-box">
  <p id="quote" class="quote"> hello</p>
  <p id="source" class="source"> hello</p>
</div>