Codes316 Codes316 - 6 months ago 9
HTML Question

My function seems to only return undefined values

I am trying to append my function

GetQuotes()
to a button. Every time you click the button, it displays new text, or in this case, new quotes. Currently, the button only displays an answer that is
undefined
.

My logic was to create an array with strings of quotes. I first tried using a
for
loop to generate random quotes to appear. However, that clearly didn't make any sense. I then used
Math.random()
to generate random quotes. I then tried appended it my
h2
class called
stuff
. The button is called
quotes
. When you click the button it changes the text in the
h2
.

Here is the Javascript:

function getQuotes(){
var quotes = [
"Thousands of candles can be lighted from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared.Buddha",
"Happiness is the art of never holding in your mind the memory of any unpleasant thing that has passed.Unknown",
"To be happy, we must not be too concerned with others.Albert Camus",
"If you want happiness for an hour — take a nap.If you want happiness for a day — go fishing.If you want happiness for a year — inherit a fortune.If you want happiness for a lifetime — help someone else."
]

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

document.getElementById("stuff").innerHTML = result;
}


Here is the jQuery:

$(document).on('click', '#quotes', function() {
document.getElementById("stuff").innerHTML = getQuotes();
});


And the HTML:

<div class="row">
<div class="col-12-xs">
<h2 id="stuff" class="text-center"><em> Here is some Text </em> </h2>
</div>
</div>

Answer

Your function doesn't return anything, so JS will give you undefined instead. Because the last line of your function is setting the element directly, then the jQuery handler is setting it again (to undefined), you'll end up losing the value and only seeing undefined.

What you are currently doing is essentially:

// as part of getQuotes:
  document.getElementById("stuff").innerHTML = result; 
  // return undefined;

// in the handler
document.getElementById("stuff").innerHTML = undefined; // the output from getQuotes

You can either change your function to:

function getQuotes(){ 
  var quotes = [ "Thousands of candles can be lighted from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared.Buddha",
"Happiness is the art of never holding in your mind the memory of any unpleasant thing that has passed.Unknown",
"To be happy, we must not be too concerned with others.Albert Camus",
"If you want happiness for an hour — take a nap.If you want happiness for a day — go fishing.If you want happiness for a year — inherit a fortune.If you want happiness for a lifetime — help someone else."]

return quotes[Math.floor(Math.random() * quotes.length)]; 
}

or you can leave the innerHTML = foo in your function and change the jQuery handler to:

$(document).on('click', '#quotes', function() {
    getQuotes();
});
Comments