Display var in HTML using jQuery
Question
I'm working on the free code camp zipline "Build a random quote machine". I've tried searching and looking at different tutorials but I can't seem to get my random quote to display. I think I'm close but after hours of trying I figured I would ask the experts! I know the onClick is working because if I put newQuote in quotes it displays where I want it to but I'm not calling the variable correctly it seems.
$(document).ready(function() {
generator();
function generator() {
var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed you 3 times"];
var newQuote = [Math.floor(Math.random() * quotes.length)]
}
$(".btn").on("click", function() {
$('#output').html(newQuote);
});
});
7 answers
solution1
4 ACCPTED 2015-12-19 07:16:58
$(document).ready(function() { function generator() { var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i've been weak", "Scientists have discovered a food that diminishes a woman's sex drive by 90%…", "I may look calm, but in my head I've killed you 3 times"]; return quotes[Math.floor(Math.random() * quotes.length)]; } $(".btn").on("click", function() { $('#output').html(generator()); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn">btn</button> <span id="output"></span>
solution2
1 2015-12-19 07:14:47
You need to initialize then set the values.
$(document).ready(function() { // Initialize then set variables var quotes; var newQuote; generator(); // Sets the variables function generator() { quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i've been weak", "Scientists have discovered a food that diminishes a woman's sex drive by 90%…", "I may look calm, but in my head I've killed you 3 times"]; // Generate new random index to select newQuote = Math.floor(Math.random() * quotes.length); } // Each time the button with class 'btn' is clicked, generate a new quote // and change the output HTML $(".btn").on("click", function() { // Change quote values generator(); // Output changes $('#output').html(quotes[newQuote]); }); });
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <button class="btn">button</button> <div id="output"></div> </body> </html>
solution3
0 2015-12-19 07:12:46
Try this
var newQuote = quotes[Math.floor(Math.random() * quotes.length)]
Yor are not seeing result because newQuote consist index of random quote
solution4
0 2015-12-19 07:14:57
I think the first issue is that you have missed the name of the array...
var newQuote = quotes[Math.floor(Math.random() * quotes.length)];
The second thing is that the function doesn't really seem necessary and you should either be returning a value, eg
return quotes[Math.floor(Math.random() * quotes.length)];
or just not use it at all...
$(document).ready(function() {
var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed you 3 times"];
$(".btn").on("click", function() {
var newQuote = quotes[Math.floor(Math.random() * quotes.length)];
$('#output').html(newQuote);
});
});
EDIT: Here is the example with the function returning a value.
$(document).ready(function() {
function generateQuote() {
var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed you 3 times"];
return quotes[Math.floor(Math.random() * quotes.length)];
}
$(".btn").on("click", function() {
$('#output').html(generateQuote());
});
});
solution5
0 2015-12-19 07:18:05
Try this:
$(document).ready(function() {
var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed you 3 times"];
$(".btn").on("click", function() {
$('#output').html(quotes[Math.floor(Math.random() * quotes.length)]);
});
});
The reason for me to remove the generator function is if you keep that, then var quotes would be local to that function. No need for it.
The final key is to generate the random index every time the button is clicked.
solution6
0 2015-12-19 07:19:27
Please find working example here
https://jsfiddle.net/dcxbuaev/
You were using the newQuote variable wrongly
solution7
-1 2015-12-19 07:09:48
$(document).ready(function() {
generator();
function generator() {
var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed you 3 times"];
var newQuote = [Math.floor(Math.random() * quotes.length)]
}
$(".btn").on("click", function() {
$('#output').html(newQuote.toString());
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.