事实生成器(不是随机)



我正在为我公司的关于页面添加一个随机的事实生成器。目前看起来像这样:

var targetemployee = document.getElementById('targetemployee');
    var factsemployee = [
      'Fact1',
      'Fact2',
      'Fact3',
      'Fact4',
      'Fact5',
    ];
    function newEmployeeFact () {
      var i = Math.floor(Math.random() * factsemployee.length) | 0;
      targetemployee.innerText = factsemployee[i]
    }
    
    newEmployeeFact();
    <div style="text-align: center;">
    <p class="funfact" id="targetemployee"></p><button type="button" class="hover-shadow" style="text-align: middle; font-size: 0.8em; bottom: 0px" onclick="newEmployeeFact()"> NEW FACT </button>
    </div>

我的问题是,在单击几次之后,有时会显示出相同的事实,而不是新事实,所以我只想更改是顺序的。有小费吗?我是JS初学者,所以我感谢您的帮助!

这样的事情怎么样?

var targetemployee = document.getElementById('targetemployee');
var factsOrig = [
    'Fact1',
    'Fact2',
    'Fact3',
    'Fact4',
    'Fact5',
  ];
var factsemployee = factsOrig.slice(0);
function newEmployeeFact () {
    if (!factsemployee.length) {
        factsemployee = factsOrig.slice(0); // Refill array
    }
    var i = Math.floor(Math.random() * factsemployee.length) | 0;
    targetemployee.innerText = factsemployee[i]
    factsemployee.splice(i, 1); // Remove from active array
}
newEmployeeFact();
<div style="text-align: center;">
<p class="funfact" id="targetemployee"></p><button type="button" class="hover-shadow" style="text-align: middle; font-size: 0.8em; bottom: 0px" onclick="newEmployeeFact()"> NEW FACT </button>
</div>

最新更新