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);
});
});

Try $('#output').html(newQuote.toString());

James
– James

2015-12-19 07:04:55 +00:00
Commented Dec 19, 2015 at 7:04 — James
– James, Commented Dec 19, 2015 at 7:04
declare newQuote outside the function

roullie
– roullie

2015-12-19 07:15:10 +00:00
Commented Dec 19, 2015 at 7:15 — roullie
– roullie, Commented Dec 19, 2015 at 7:15

Alien · Accepted Answer · 2015-12-19 07:37:59Z

4

$(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>

edited Dec 19, 2015 at 7:37

answered Dec 19, 2015 at 7:16

Alien

3,6761 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brett Wray Over a year ago

This did it! Thank You!

Mike · Accepted Answer · 2015-12-19 07:25:50Z

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>

mef_ · Accepted Answer · 2015-12-19 07:12:46Z

0

Try this

var newQuote = quotes[Math.floor(Math.random() * quotes.length)]

Yor are not seeing result because newQuote consist index of random quote

answered Dec 19, 2015 at 7:12

mef_

4081 gold badge13 silver badges31 bronze badges

Comments

Will · Accepted Answer · 2015-12-19 07:18:05Z

0

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.

answered Dec 19, 2015 at 7:18

Will

1,7783 gold badges17 silver badges23 bronze badges

Comments

AbdulRahman Ansari · Accepted Answer · 2015-12-19 07:19:27Z

0

Please find working example here

https://jsfiddle.net/dcxbuaev/

You were using the newQuote variable wrongly

answered Dec 19, 2015 at 7:19

AbdulRahman Ansari

3,0571 gold badge23 silver badges29 bronze badges

Comments

Quantumplate · Accepted Answer · 2015-12-19 07:26:28Z

0

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, e.g.

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());
  });
});

edited Dec 19, 2015 at 7:26

answered Dec 19, 2015 at 7:14

Quantumplate

1,1048 silver badges17 bronze badges

2 Comments

Brett Wray Over a year ago

This worked to display a quote, but when I click the button again it does not generate a new quote. I even reloaded the page and clicked the button, the same quote appeared. Is there something I need to add to get it to generate a new quote?

Quantumplate Over a year ago

Sorry, had declared newQuote in the wrong place. Have updated my answer.

Dilip Oganiya · Accepted Answer · 2015-12-19 07:09:48Z

-1

$(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());
});
});

answered Dec 19, 2015 at 7:09

Dilip Oganiya

1,56414 silver badges22 bronze badges

Collectives™ on Stack Overflow

Display var in HTML using jQuery

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related