CODEWITHSUNDEEP
javascriptjqueryhtml
Brett Wray
Brett Wray

Reputation: 35

Display var in HTML using jQuery

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

Upvotes: 0

Views: 4855

Answers (7)

Alien
Alien

Reputation: 3668

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

Upvotes: 4

Quantumplate
Quantumplate

Reputation: 1104

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

Upvotes: 0

Mike
Mike

Reputation: 3940

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>

Upvotes: 1

AbdulRahman Ansari
AbdulRahman Ansari

Reputation: 3057

Please find working example here

https://jsfiddle.net/dcxbuaev/

You were using the newQuote variable wrongly

Upvotes: 0

Will
Will

Reputation: 1768

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.

Upvotes: 0

mef_
mef_

Reputation: 398

Try this

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

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

Upvotes: 0

Dilip Oganiya
Dilip Oganiya

Reputation: 1554

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

Upvotes: -1

Related Questions