I'm currently working on creating a quote generator using an object instead of an array.
Although I can retrieve results, I seem to be getting the name of the quote rather than the actual quote itself.
I attempted to use the bind method, but unfortunately, it didn't yield any results.
Would appreciate any assistance with this issue. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Quote Generator</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 buttonGenerator = 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 believe it is impossible for me to make a bad movie.'
}
}
buttonGenerator.addEventListener('click', quoteGenerator);
function quoteGenerator(){
var count = 0;
for(var value in quotes){
if(Math.random() < 1/count++)
paragraph.innerHTML = quotes[value].quote;
console.log(quotes[value].quote);
}
}