Javascript - 不重複代碼的隨機報價生成器

這是我第一篇關於堆棧溢出的文章。Javascript - 不重複代碼的隨機報價生成器

我已經嘗試了幾個例子，在這裏如何克服這個問題，但找不到一個修復程序（我仍然是一個JavaScript的新手）。

我創建了一個隨機報價生成器，每隔15秒或點擊一次「更改背景並更改報價」。

我現在試圖讓它不要重複自己，而且要記錄顯示在控制檯中的引號。

引號位於「數組」內的「對象」內。

代碼如下。感謝您的幫助我有3個文件（index.html的，quotes.js，的script.js） -quotes.js

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

 
//Sets up interval to show print qutoe every 15 seconds 
 
var intervalID = window.setInterval(myCallback, 15000); 
 
function myCallback() { 
 
    printQuote(); 
 
} 
 

 
// Gets a random quote from array Quotes 
 
function getRandomQuote() { 
 
    var pickQuote = quotes[Math.floor(Math.random() * quotes.length)]; 
 
    return pickQuote; 
 
} 
 

 
//prints quote to html 
 
function printQuote() { 
 
    var getQuote = getRandomQuote(); 
 
    var message = ''; 
 
    message += '<p class ="quote">' + getQuote.quote + '</p>'; 
 
    message += '<p class ="source">' + getQuote.source + '</p>'; 
 
    message += '<p class ="tag">' + getQuote.tag + '</p>'; 
 
    document.getElementById('quote-box').innerHTML = message; 
 
    newColor(); 
 
} 
 
// function that will generate random color to the backgroun 
 
var newColor = function randomColor() { 
 
    document.body.style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
 
}

var quotes = [ 
 
//success quotes 
 
    { 
 
    quote: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.", 
 
    source: "James Cameron", 
 
    tag: "success" 
 
    }, 
 
    { 
 
    quote: "The Way Get Started Is To Quit Talking And Begin Doing", 
 
    source: "Walt Disney", 
 
    tag: "success" 
 
    }, 
 
    { 
 
    quote: "Don’t Let Yesterday Take Up Too Much Of Today.", 
 
    source: "Will Rogers", 
 
    tag: "success" 
 
    }, 
 
    { 
 
    quote: "We Generate Fears While We Sit. We Overcome Them By Action", 
 
    source: "Dr. Henry Link", 
 
    tag: "success" 
 
    }, 
 

 
//health quotes 
 
    { 
 
    quote: "Early to bed and early to rise, makes a man healthy wealthy and wise.", 
 
    source: "Benjamin Franklin", 
 
    tag: "health" 
 
    }, 
 
    { 
 
    quote: "Let food be thy medicine and medicine be thy food.", 
 
    source: "Hippocrates", 
 
    tag: "health" 
 
    }, 
 
    { 
 
    quote: "If you can’t pronounce it, don’t eat it.", 
 
    source: "Common Sense", 
 
    tag: "health" 
 
    }, 
 
    { 
 
    quote: "Health is like money, we never have a true idea of its value until we lose it.", 
 
    source: "Josh Billings", 
 
    tag: "health" 
 
    }, 
 

 
//spirituality quotes 
 
    { 
 
    quote: "Life is really simple, but men insist on making it complicated.", 
 
    source: "Confucius", 
 
    tag: "spirituality" 
 
    }, 
 
    { 
 
    quote: "My religion is very simple. My religion is kindness.", 
 
    source: "Dalai Lama", 
 
    tag: "spirituality" 
 
    }, 
 
    { 
 
    quote: "Knowing others is wisdom; knowing the self is enlightenment.", 
 
    source: "Tao Te Ching", 
 
    tag: "spirituality" 
 
    }, 
 
    { 
 
    quote: "When there is love in your heart, everything outside of you also becomes lovable.", 
 
    source: "Veeresh", 
 
    tag: "spirituality" 
 
    } 
 

 

 
];

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Random Quotes</title> 
 
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/styles.css"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div id="quote-box"> 
 
     <p class="quote">Be the change you wish to see in the world! </p> 
 
     <p class="source">Ghandi </p> 
 
    </div> 
 
    <button id="loadQuote">Show another quote</button> 
 
    </div> 
 
    <script src="js/quotes.js"></script> 
 
    <script src="js/script.js"></script> 
 

 
</body> 
 
</html>

來源

2017-01-08 nishnash

當沒有更多的引號時，該做什麼？ –

@DavidEhrmann在這種情況下將需要一個復位功能，允許重置「歷史」重新啓動「循環」 –

一方法是改變你的getRandomQuote()功能：

function getRandomQuote() { 
    return quotes.splice(Math.floor(Math.random() * quotes.length), 1); 
}

說明：Array.splice()從數組中刪除項目，並返回刪除的項目。第一個參數是從哪裏開始拼接，第二個參數是要移除多少個項目。這種方式使用時會刪除已用過的引號，因此在重新加載頁面之前不能再次使用。

來源

2017-01-08 19:34:10 Schlaus

非破壞性的方式是從索引數組中刪除元素而不是引用數組本身，即' 0，1，2，3，...]'。 – noisypixy

真棒，工作像一個魅力:) thx這麼多的建議：+1： – nishnash

我喜歡你的想法，並真正閱讀這些報價！也許嘗試編輯：

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

可能有點過時。嘗試：

document.getElementById('loadQuote').onclick = function(name){yourScript};

暗示這一點，因爲我想你的代碼時，收到以下錯誤信息：

"message": "Uncaught TypeError: Cannot read property 'addEventListener' of null". Just try simplifying.

，我認爲你的工作是人誰認爲自己是初學者非常令人印象深刻！

來源

2017-01-08 20:40:31 LorettaA

thx塔爾，我需要在這個階段的良好的小動機:) .. @Schlaus的建議實際上工作完美... Thx對你的幫助/建議認爲:) – nishnash

Javascript - 不重複代碼的隨機報價生成器

回答

相關問題