如何使用随机方法调用 属性?

How to call a property using a random method?

我正在尝试使用对象而不是数组来构建报价生成器。

我能够得到结果,但我得到的不是报价,而是报价的名称。

我试过使用绑定方法,但是没有结果。

有什么帮助吗?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Quote Generatr</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="text-center">
        <div class="background">
            <h1>2018 Reading Notes</h1>
            <p>Motivational Quotes</p>
        </div>
        <p id="quotes"></p>
        <button class='btn btn-danger mt-4' style="border-radius: 0px; font-size: 2rem;">Show me another Quote</button>
        <p class="mt-5">Made with ❤️️ by Anthony</p>
    </div>


    <script src="jquery-3.3.1.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

var paragraph = document.querySelector('#quotes');
var butonGenerator = document.querySelector('.btn');

var quotes = {
    quote1: {
        author: 'Carol Burnett',
        quote: 'Only I can change my life. No one can do it for me.'
    },
    quote2: {
        author: 'Norman Vaughan',
        quote: 'Dream Big and Date to Fail.'
    },
    quote3:{
        author:'Jean-Claude Van damme',
        quote:'I now truly belive it is impossible for me to make a bad movie.'
    }

}


butonGenerator.addEventListener('click', quoteGenerator);

function quoteGenerator(){
    var count = 0;
    for(var value in quotes){
        if(Math.random() < 1/count++)
        paragraph.innerHTML = value;
       console.log(value);
    }
}

不知何故错过了您不想使用数组的部分。但这绝对是要走的路。见下文。

您应该有一组引号。请参阅下面的代码段。将 javascript in <script></script> 标签放在 </body> 标签下方

var paragraph = document.querySelector('#quotes');
var butonGenerator = document.querySelector('.btn');

var quotes = [
    {
        author: 'Carol Burnett',
        quote: 'Only I can change my life. No one can do it for me.'
    },
    {
        author: 'Norman Vaughan',
        quote: 'Dream Big and Date to Fail.'
    },
    {
        author:'Jean-Claude Van damme',
        quote:'I now truly belive it is impossible for me to make a bad movie.'
    }

]


butonGenerator.addEventListener('click', quoteGenerator);

function quoteGenerator(){
    var item = quotes[Math.floor(Math.random()*quotes.length)];
 console.log(item.author);
 console.log(item.quote);
 paragraph.innerHTML = 'Author:<br />' + item.author + '<br /><br />Quote:<br />' + item.quote;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Quote Generatr</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="text-center">
        <div class="background">
            <h1>2018 Reading Notes</h1>
            <p>Motivational Quotes</p>
        </div>
        <p id="quotes"></p>
        <button class='btn btn-danger mt-4' style="border-radius: 0px; font-size: 2rem;">Show me another Quote</button>
        <p class="mt-5">Made with ❤️️ by Anthony</p>
    </div>


    <script src="jquery-3.3.1.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

我不知道你为什么要在这种情况下尝试使用一个对象,但如果这是必须的,你可能会发现 Object.keys(quotes) 很有用,因为它 returns 实际的键(所以在您的情况下,对象的 'quote1'、'quote2' 等)作为数组。 然后您可以创建一个随机数,从此处创建的数组中检索给定的索引并使用该字符串访问对象属性。

var array = Object.keys(quotes); // convert the object to an array of it's keys
var key = array[randomIndex]; // get a random key
var quoteObject = quotes[key]; // use it to access the property of the object.

(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)

无论如何,在这种情况下,如果可以的话,您应该始终使用数组。