2016-05-06 3 views
1

私はオブジェクト(引用符)の配列をとり、乱数生成関数に基づいてランダムなクォートを表示するクラス用のランダムクォートジェネレータを構築しています。余分なクレジットのためにコースでは、クォートだけを一度表示する方法を見つけてから、再度クォートをループバックするよう依頼しています。これを行うには、空の配列を作成し、その配列に引用符をつけて元の配列から切り出し、元の配列の長さが0かどうかを調べるforループを実行することにしました。新しい配列をループして、各インデックスを元の配列に戻します。JavaScriptランダムクォートジェネレータ

私が実行している問題は、元の配列からインデックスをスプライスすると、ループの一部になっている空の配列の後ろに残りますが、未定義です。そのインデックスは、最終的にランダムジェネレータに基づいて表示され、「未定義」のエラーをもたらします。プッシュ/スプライス方法せず、私のコードは、 -

// event listener to respond to clicks on the page 
// when user clicks anywhere on the page, the "makeQuote" function is called 

document.getElementById('loadQuote').addEventListener("click", printQuote, false); 

//defining variables 

var message = ''; 
var viewedquotes = []; 


//print function to print the randomly selected quote to the page 

function print(message) {  
     var outputDiv = document.getElementById('quote-box'); 
     outputDiv.innerHTML = message; 
}    

//a function that creates a random number between 0 and the length of quotes to randomly select an object or index of the quotes array and return the value of it. 

function getRandomQuote() { 
     var quoteObject = quotes[Math.floor(Math.random() * quotes.length)]; 
     return quoteObject; 
} 


//RandomColors function to generate random RGB values and return the values 


function RandomColors() { 
     var red = Math.floor(Math.random() * 256); 
     var green = Math.floor(Math.random() * 256); 
     var blue = Math.floor(Math.random() * 256); 
     var colors = 'rgb(' + red + ',' + green + ',' + blue + ')'; 
     return colors; 
} 


//Takes the random quote function stores it into var printObject and adds them to message variable as a string of paragraphs and spans. 
//If citation and year are undefined it does not print them. 
//Resets the message variable to be '' after for a new click to generate a new quote. 
//Uses the getRandomColors function to change the body's background color each time the button is clicked. 

function printQuote() { 
     var printObject = getRandomQuote(); 
     message += '<p class="quote">' + printObject.quote + '</p>'; 
     message += '<p class="source">' + printObject.source + ''; 
     if (printObject.citation !== undefined) { 
       message += '<span class ="citation">' + printObject.citation + '</span>'; 
      } 
     if (printObject.year !== undefined) { 
       message += '<span class ="year">' + printObject.year + '</span>'; 
      } 
     message += '</p>'; 
     print(message); 
     message = ''; 
     var getRandomColors = RandomColors(); 
     document.body.style.backgroundColor = getRandomColors; 
} 

スプライシングおよびIは、最後の機能をしようとしていた押圧方法は以下の通りである(これはprintQuote()関数内のメッセージ=「」行の後にあった -

var pushQuote = viewedquotes.push(printObject); 
       console.log(viewedquotes); 
       var indexOfQuote = indexOf(printObject); 
       var spliceQuote = quotes.splice(indexOfQuote,1); 
       var quotesLength = quotes.length; 
       console.log(quotes); 
       if (quotesLength === 0) { 
        for (i = 0; i <= viewedquotes ; i++) { 
         quotes.push(viewedquotes[i]); 

        } 
      viewedquotes= []; 
       } 

コードを実行している私は、コンソールに毎回両方viewedquotesと引用符を印刷するとき?今、元の1に残っている空の配列を作成するのスプライスを防止するための方法はあり、それは

のように出て起動します

[オブジェクト] [オブジェクト] [オブジェクト] [オブジェクト] 【目的】

て[オブジェクト] [オブジェクト] [オブジェクト] [目的] [目的]

を行って、元の配列は0の長さを有するであろう一度は[してリセットします定義されていない]、最終的に私にエラーを与える。

私はこれを完了するための他の方法があるかもしれないことを知っているが、私のロジックがいくつかの調整を行うことができますか?

はありがとう

+0

'for'ループで配列の長さに対してループする必要があります:' viewedquotes.length'(それ以外の場合は永遠にループします)。また、 'pushQuote'は、あなたが押しているアイテムではなく整数を返します。 – nathanallen

答えて

2

あなたは、その後、引用配列からランダムなインデックスを継ぐ二番目の配列におけるスタックの先頭にプッシュするためにあなたの方法を調整することができます。 Like:

var quotes1 = ["q1", "q2", "q3", "q4", "q5"]; 
var quotes2 = []; //<==empty array 

var indexToSplice = Math.floor(Math.random() * quotes1.length); 
var spliceQuote = quotes1.splice(indexToSplice, 1); 
print(spliceQuote); 
quotes2.push(spliceQuote); 

しかし、変更を検討する必要があります。これは、引用配列が空の場合に発生します。

if (quotes1.length == 0) { 
    quotes1 = quotes2; 
    quotes2 = []; 
} 

Here is a Fiddle私はそれをテストしました。

+0

うわー、そんなに簡単なことは信じられません。それは私の鼻の下にあったのです。簡単なヘルプ/調整をしていただきありがとうございます。まったく異なる方法ではありません。私は正しい道/ロジックにあったのを見てうれしいです。 – BrokenWings

+0

@BrokenWingsようこそ。答えとしてマークするか、アップまたはアップしてください。 :)ありがとう! – jwatts1980