在按钮单击时显示随机字符串

Question

我的目标是有一个按钮，点击时会显示一个随机报价。我已经创建了一个 JSON 对象来存储我的报价，并编写了一个函数来随机选择和打印对象中的报价。

HTML sn-p - 按钮（Bootstrap 等）

<div class="row" id="quotebox">
  <div class="text-center">
      <button class="btn btn-default" onclick ="randomQuote()"type="submit">Hit Me Baby One More Time</button>
  </div>
</div>

存储 5 个引号的 JSON 对象

var quotesList = [{
    quote: "Planting popcorn does not produce more popcorn",
    person: "Farmer Ted"
}, {
    quote: "White whale, bad whale",
    person: "Confucious (Moby Dick)"
}, {
    quote: "Use the strobe function to disorientate your attacker",
    person: "Flashlight"
}, {
    quote: "Apply liberally to your erogenous zones",
    person: "Spice Bomb"
}, {
    quote: "Help me, I'm bleaching",
    person: "The Great Barrier Reef"
}];

最后是打印随机引用的函数（由onClick触发）

function randomQuote() {
  var listLength =  Object.keys(quoteList).length;
  var randVal = Math.floor(Math.random() * listLength);
  document.write(quotesList[randVal]);
}

上面的两个 sn-ps 组成了我的整个 JavaScript 代码。

Answer 1

这里是固定的 JS。主要问题是您使用Object.keys(quoteList).length 来获取quoteList 的长度，即使它只是一个简单的数组。此外，您使用的是document.write，这通常被认为是不好的做法。我通过将document.getElementById('quotebox').innerHTML 设置为带有引号和作者的字符串来替换它。最后，您将整个报价对象写入屏幕，而不是访问报价对象的各个属性并从中构造一个字符串。

var $quoteBox = document.getElementById('quotebox');

var quotesList = [
  {
    quote: "Planting popcorn does not produce more popcorn",
    person: "Farmer Ted"
  }, {
    quote: "White whale, bad whale",
    person: "Confucious (Moby Dick)"
  }, {
    quote: "Use the strobe function to disorientate your attacker",
    person: "Flashlight"
  }, {
    quote: "Apply liberally to your erogenous zones",
    person: "Spice Bomb"
  }, {
    quote: "Help me, I'm bleaching",
    person: "The Great Barrier Reef"
  }
];

function randomQuote() {
  var randIdx = Math.floor(Math.random() * quotesList.length);
  var randQuote = quotesList[randIdx];
  $quoteBox.innerHTML = "\"" + randQuote.quote + "\" - " + randQuote.person;
}