私の関数は未定義の値だけを返すようです。

Question

ボタンに私の関数GetQuotes()を追加しようとしています。ボタンをクリックするたびに、新しいテキストが表示されます。この場合は新しい引用符が表示されます。現在のところ、ボタンには回答が表示されるのはundefinedです。

私のロジックは、引用符の文字列で配列を作成することでした。最初にforループを使用してランダムな引用符を生成して表示しようとしました。しかし、それは明らかに意味をなさない。私はランダム引用符を生成するためにMath.random()を使用しました。私はそれから、クラスをstuffというクラスに追加しようとしました。このボタンはquotesと呼ばれます。ボタンをクリックすると、h2のテキストが変更されます。ここで

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

はjQueryのです：

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

そして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 1

あなたの関数は何も返さないので、JSがします代わりにundefinedを教えてください。関数の最後の行が要素を直接設定しているので、jQueryハンドラは再びそれを（未定義に）設定しています。値が失われ、定義されていないことがわかります。

あなたが現在やっていることは本質的である：

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

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

あなたはどちらかがにあなたの関数を変更することができます

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

か、あなたの関数でinnerHTML = fooを残して変更することができますjQueryハンドラへ：

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

Answer 2

getQuotes divのinnerHTMLを設定する代わりに、最後にreturn resultとする必要があります。

getQuotesは、stuff divのinnerHTMLに設定され、undefined（明示的なreturn文がないため）を返します。それが起こる後、あなたのonclickハンドラはまた、あなたは自分のクリックハンドラでgetQuotesないからinnerHTMLプロパティを設定することができ、それはあなたのgetQuotesを作るので、私は、それは良いアイデアだとは思わないundefined

でinnerHTMLプロパティを上書きされますテストするのが難しい機能です。

Answer 3

あなたの関数は何も返さないので、必要な見積もりの​​値にinnerhtmlの値を設定すると、最初に行いますが、関数が何も返さないので、未定義の関数から返されますjqueryコードのinnerhtmlに追加します。

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

 
    return result; 
 
}