将 HTML 元素设置为随机对象键：值对

Question

我正在尝试使用“数据库”在单击按钮时随机循环浏览一些引号，并以相同的方式将 HTML 中的现有引用更改为随机引用和现有作者

var myDatabase = [
    {quote:"I have learned silence from the talkative...", author:"Khalil Gibran"}, 
    {quote: "One of the blessings of old friends that you can afford to be stupid with them." author:"Ralph Waldo Emmerson"},
    {quote: "Once we accept our limits, we go beyond them." author:"Albert Einstein"}
 ];
var newQuote = document.getElementById('displayedQuote');
var newAuthor = document.getElementById('author');

$("#quoteButton").click(function() {
    var rand = Math.floor(Math.random()*database.length)
    newQuote = myDatabase.[rand].quote;
    newAuthor = myDatabase.[rand].author;
});

Answer 1

首先，您的“数据库”有语法错误。它应该是：

var myDatabase = [{
  "quote": "I have learned silence from the talkative...",
  "author": "Khalil Gibran"
}, {
  "quote": "One of the blessings of old friends that you can afford to be stupid with them.",
  "author": "Ralph Waldo Emmerson"
}, {
  "quote": "Once we accept our limits, we go beyond them.",
  "author": "Albert Einstein"
}];

其次，您将香草 JS 与 Jquery 混合在一起。虽然这在技术上并没有错，但如果你只坚持其中一个，阅读起来会容易得多

var newQuote = $('#displayedQuote');
var newAuthor = $('#newAuthor');

最后，您的 click 方法中的语法不正确。您正在为 newQuote 和 newAuthor 变量分配一个值，而不是操作该元素。您要做的是使用 .text() 方法将对象值添加到 DOM。

此外，您不需要在 [rand] 整数之前使用点符号，并且您希望 myDatabase.length 而不是 database.length

$("#quoteButton").click(function() {
    var rand = Math.floor(Math.random() * myDatabase.length)
    newQuote.text(myDatabase[rand].quote) 
    newAuthor.text(myDatabase[rand].author)
});

这是一个工作示例：https://codepen.io/mark_c/pen/pExxQA

Answer 2

类似的东西？

var myDatabase = [
{quote:"I have learned silence from the talkative...", author:"Khalil Gibran"}, 
{quote: "One of the blessings of old friends that you can afford to be stupid with them." author:"Ralph Waldo Emmerson"},
{quote: "Once we accept our limits, we go beyond them." author:"Albert Einstein"}
 ];
var newQuote = document.getElementById('displayedQuote');
var newAuthor = document.getElementById('author');

$("#quoteButton").click(function() {
    var rand = Math.floor(Math.random()*database.length)
    $(newQuote).text(myDatabase[rand].quote);
    $(newAuthor).text(myDatabase[rand].author);
});