Question

所以，我对这种东西不熟悉，我有一个问题。我发现这个代码用于选择一个随机单词，但是直到所有单词都被选中后才会再次选择它。

function shuffle(array)
{
  var m = array.length, t, i;
  while (m > 0) 
  {
    i = Math.floor(Math.random() * m--);
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }
  return array;
}

var keywords = ["Cheese", "Apples", "Grapes", "Chicken", "Potatoes", "Beef", "Bananas"];

shuffle(keywords); // shuffles the array

alert(keywords);

这提出了一个问题。如果点击了一张卡片上的白色盒子，我怎么能触发这个？我希望一个盒子在任何时候只显示其中一个值，并在点击时随机选择另一个单词，使用此代码。

非常感谢任何帮助。

Answer 1

无需使用随机播放，您可以使用

等选项随机选择

＆＃13;

var keywords = ["Cheese", "Apples", "Grapes", "Chicken", "Potatoes", "Beef", "Bananas"];

var mybox = document.getElementById('mybox'),
  idx;
//click handler for the box
mybox.addEventListener('click', function() {
  var index;
  do {
    index = Math.floor(Math.random() * keywords.length);
  } while (index == idx); //to make sure every click changes the selcted value
  mybox.innerHTML = keywords[index];
  idx = index;
})

＆＃13;

#mybox {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  text-align: center;
}

＆＃13;

<div id="mybox"></div>

＆＃13;

Answer 2

制作一个像这样的html标签：

<div id="myvalue">default value</div>

为了示例的目的，我将使用一个按钮作为你的白盒子的模拟器＆＃39;因为我不知道它背后的HTML是什么。但是，同样的原则也适用。

<button id="myButton">Mock representing the "white box"</button>

然后创建一个函数，从列表中随机选择一个值并将其显示在上面的标记中：

function showWord(e){
    var len = 1/keywords.length;
    var pos = Math.floor(Math.random()/len);
    document.getElementById('myvalue').innerHTML = keywords[pos];
}

...并将其绑定到显示触发元素（在这种情况下是按钮，在你的任何标签中，＆＃34; card＆＃34;组成）与点击监听器：

document.getElementById('myButton').addEventListener("click", showWord);

单击按钮（或将事件侦听器绑定到的任何内容）现在将导致从数组中随机选择以显示在div中。每次后续点击都会改变它。

Here's a jsfiddle showing it in action

（你的问题有点模糊，所以它不是一个完美的答案，但希望它能满足你的需要。而且，我假设你已经拥有了特定的白色盒子冒充卡片元素创建或至少记住，并需要Javascript随身携带）

如何在鼠标单击上更改元素文本

2 个答案: