Соедините одно изображение с одной ячейкой в ​​таблице с помощью Javascript

Я довольно новичок как в программировании, так и в этом сообществе, я постараюсь быть максимально понятным. Мне нужно создать HTML-таблицу 16x16 с кнопкой в ​​каждой ячейке, которая отображает различное изображение - смайлик - на ячейку, при этом никогда не показывая одинаковый смайлик для разных ячеек. Я немного застрял, и я был бы признателен за подсказку, просто чтобы попытаться двигаться дальше самостоятельно. Спасибо! Вот мой код, который создает таблицу и отображает изображение:

function displayImage(){
    var num = Math.floor(Math.random() * 256);
    document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
    document.getElementById("YourImage").style.visibility = "visible";
}
for(var r = 0; r < rows;r++)
{
    table += '<tr>';
    for(var c= 0; c< cols;c++)
    {
        table += '<td style="width:50px" id="(i++)">' + '<button type="button" onclick="displayImage()">' +
        "show me" + '</button>' + '</td>';
     }
     table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');

(ImagesArray не показан для удобства чтения, но он просто собирает все 256 двоичных комбинаций). Проблема в том, что каждый раз, когда я нажимаю на кнопку, она отображает случайное изображение, и если я снова нажимаю на ту же кнопку, она показывает другую, в то время как я хотел бы, чтобы она показывала мне всегда одно и то же изображение для одной и той же кнопки. ПРИМЕЧАНИЕ: я не могу удалить кнопку впоследствии или подобные трюки, так как игрок (это эксперимент oTree) должен иметь возможность вернуться к смайлику, который он видел в любое время. Большое спасибо за вашу помощь!

Источник

2 ответа

Решение

Я бы изменил точку, где генерируется случайное число, и переместил бы его из функции отображения в инициализацию таблицы.

Создайте массив с номерами от 0 до 255. При циклическом просмотре строк и столбцов для создания таблицы выберите одно случайное число из этого массива и назначьте его атрибуту id кнопки. Обязательно удалите этот номер из массива, чтобы его нельзя было использовать снова для следующих кнопок. Таким образом, будут использованы все 256 чисел, но в случайном порядке. Когда пользователь нажимает кнопку, с displayImage(this.id) идентификатор кнопки используется как параметр для вызова displayImage(), Таким образом, всегда будет использоваться один и тот же номер кнопки для получения соответствующего изображения.

Код:

// call displayImage() with parameter
function displayImage(num){
    document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
    document.getElementById("YourImage").style.visibility = "visible";
}

// create array 'nums' with numbers from 0 to 255 (= rows * cols)
var nums = [];
for (var i = 0; i < (rows * cols); i++) {
    nums.push(i);
};

for(var r = 0; r < rows; r++)
{
    table += '<tr>';
    for(var c = 0; c < cols; c++)
    {
        // get random index in array 'nums'
        var random = Math.floor(Math.random() * nums.length);
        // assign an id to the button with a random number from 'nums' and use this id in displayImage()
        table += '<td style="width:50px" id="(i++)">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' +
        "show me" + '</button>' + '</td>';
        // remove the already used random number from 'nums'
        nums.splice(random, 1);
     }
     table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');

Таким образом, у вас будет одинаковое изображение, подключенное к каждой кнопке. Он создается случайным образом при создании таблицы, поэтому каждый раз при загрузке страницы порядок меняется.

Я предполагаю, что вы используете HTML5, потому что только тогда разрешено, чтобы атрибуты id состояли только из цифр.

Примечание: я не знаю, чего именно вы хотите достичь id="(i++)" при создании <td> элемент. То, как вы это делаете, просто называет каждый идентификатор строкой (i++) что противоречит идее, что идентификаторы должны быть уникальными. Если вы хотите назвать идентификаторы по возрастанию, например, от td-0 в td-255 Вы должны изменить строку на:

table += '<td style="width:50px" id="td-' + (r * rows + c) + '">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' + "show me" + '</button>' + '</td>';

Вы не можете просто использовать цифры, не добавляя что-то вроде td-потому что кнопки уже имеют чистые числа в качестве идентификатора.

Источник

Попробуй это:

var rows = 16, cols = 16;
var table = '';

function shuffle(array) { // shuffle (randomize) array elements
  var i = array.length, j, x;
  while (i) {
    j = Math.random() * i-- | 0;
    x = array[i];
    array[i] = array[j];
    array[j] = x;
  }
}

var rNums = new Array(rows * cols);
for (var i = 0; i < rows * cols; i++) {
  rNums[i] = i;
}
shuffle(rNums);

function displayImage(num) {
  //var num = Math.floor(Math.random() * 256);
  document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
  //document.getElementById("canvas").innerHTML = num;
  document.getElementById("YourImage").style.visibility = "visible";
}

var i = 0;

for (var r = 0; r < rows; r++) {
  table += '<tr>';
  for (var c = 0; c < cols; c++) {
    table += '<td style="width:50px" id="' + i + '"><button type="button" onclick="displayImage(' + rNums[i] + ')">show me</button></td>';
    i++; //go to next element of rNums array
  }
  table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');
Источник
Другие вопросы по тегам