Question

这是我关于Stack溢出的第一篇文章。

我在这里尝试过几个例子来说明如何克服这个问题但找不到修复方法。（我还是一个用javascript的新手）。

我创建了一个随机引用生成器，它可以更改背景并更改引号＆＃39;每15秒或点击一次。

我现在试图让它不再重复，而且记录控制台中显示的引号。

引号属于＆＃39;对象＆＃39;在一个＆＃39;阵列中。

代码如下。谢谢你的帮助我有3个文件（index.html，quotes.js，script.js） -quotes.js

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

一种方法是稍微更改getRandomQuote()功能：

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

说明：Array.splice()从数组中删除项目，并返回已删除的项目。第一个参数是从何处开始拼接，第二个参数是要删除的项目数。这样使用时会删除使用过的引号，因此在重新加载页面之前不能再次使用它。

Answer 2

我喜欢你的想法并真正阅读这些报价！也许尝试编辑：

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

可能有点过时了。尝试：

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

建议这样做，因为我在尝试代码时收到以下错误消息：

“message”：“未捕获的TypeError：无法读取null的属性'addEventListener'”。试试简化吧。

我认为对于认为自己是初学者的人来说，你的工作非常令人印象深刻！

Javascript - 随机报价生成器，不重复代码

2 个答案: