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

Question

So, I'm new to this kind of stuff, and I have a question. I found this code for picking a random word, but not picking it again until all the word have been picked.

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

And that brought up a question. How can I trigger this when a white box, posing as a card, has been clicked? I would like a box to display only one of the values at any one time, and randomly pick another word when clicked, using this code.

Any help is super very much appreciated.

Answer 1

There no need to use a shuffle, you can pick a random item using something like

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

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

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

Answer 2

Make an html tag like so:

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

For the sake of the example I'm going to use a button as a mock for your 'white box' since I don't know what the html behind it is. However, the same principle applies.

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

Then create a function that randomly selects a value from the list and displays it in the tag above:

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

...and bind it to the display-triggering element (in this case the button, in yours, whatever tag the "card" is made up) with a click listener:

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

Clicking the button (or whatever you bind the event listener to) will now cause a random selection from the array to show up in the div. Each subsequent click will change it.

Here's a jsfiddle showing it in action

(Your question was a bit vague, so it's not a perfect answer, but hopefully it gives you what you need. Also, I'm running under the assumption that you already have a specific 'white box posing as a card' element created or at least in mind, and need the Javascript to go along with it)