如何使用随机方法调用 属性?
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)
无论如何,在这种情况下,如果可以的话,您应该始终使用数组。
我正在尝试使用对象而不是数组来构建报价生成器。
我能够得到结果,但我得到的不是报价,而是报价的名称。
我试过使用绑定方法,但是没有结果。
有什么帮助吗?
<!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)
无论如何,在这种情况下,如果可以的话,您应该始终使用数组。