Как изменить текст элемента на мышь Нажмите

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

Там нет необходимости использовать перетасовать, вы можете выбрать случайный элемент, используя что-то вроде

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

Сделать HTML-тег как так:

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

Для примера я собираюсь использовать кнопку как макет для вашей «белой коробки», так как я не знаю, что 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]; 
} 

... и связать его с дисплеем-запускающий элемент (в в этом случае кнопка, в вашей, независимо тег «карта» состоит из) со щелчком слушателя:

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

при нажатии на кнопку (или что вы свяжете событие listener to) теперь вызовет случайный выбор из массива, который будет отображаться в div. Каждый последующий щелчок изменит его.

Here's a jsfiddle showing it in action

(Ваш вопрос был немного расплывчатым, так что это не идеальный ответ, но, надеюсь, это дает вам то, что вам нужно. Кроме того, я бегу в предположении, что у вас уже есть определенный " белый ящик, создающий или, по крайней мере, в качестве элемента карты, и ему нужен Javascript)