Как я могу построить таблицу, вытащив число из перетасованного массива из 16 чисел и вставив его в HTML?
Мне нужно отобразить таблицу в HTML с 16 ячейками, содержащими числа от 1 до 16 в случайном порядке, в вопросе говорилось, что вы должны вытащить число из массива, и я не могу понять, как это сделать, спасибо за помощь :)
вот мой код
"use strict";
let numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
let shuffled = shuffleArr(numArr);
function shuffleArr(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
console.info(arr);
return arr;
}
function renderTable(arr) {
let strHTML = "";
for (let i = 0; i < arr.length / 2; i++) {
strHTML += "<tr>";
for (let j = 0; j < arr.length / 2; j++) {
strHTML += `<td></td>`;
}
strHTML += "</tr>";
}
let elTable = document.querySelector(".board");
elTable.innerHTML = strHTML;
}
pop обязательно? А какие размеры стола?
да, мне нужно использовать 2D-таблицу методом поп
вот в чем вопрос, я пытался решить это почти 3 часа... ||| Пользователь видит доску с 16 ячейками, содержащими числа от 1 до 16 в случайном порядке. o Подсказка: используйте HTML-таблицу. <table>, извлекая число из массива nums. o Примечание: в этом упражнении нет необходимости использовать в качестве матрицы
Выбор случайного числа из массива путем его перетасовки и удаления последнего элемента с помощью pop — это, пожалуй, самый затратный с вычислительной точки зрения способ, которым это можно сделать. Итак, я предполагаю, что тот, кто поставил перед вами проблему, хочет, чтобы вы узнали об алгоритмах рандомизации массивов. Вы можете начать здесь: stackoverflow.com/questions/2450954/…. Удачи. (мне сейчас все равно, но вы так и не ответили какие размеры у вашего стола, 2д может быть 2х8, 4х4, или 8,2. Если важно уточните)
@JohnnyNice хорошо, мой последний комментарий был написан до того, как я увидел ваш последний ответ. Если бы у меня был такой вопрос, я бы проигнорировал подсказки и воспользовался бы более простым методом выбора случайного элемента. Я опубликую рабочий пример (он не использует pop, поэтому не поможет вам, если вы настроены на использование pop), но он создает случайную таблицу.
большое спасибо, я не понял, что вы имели в виду под размерами, теперь я делаю это должно быть 4x4, а затем я должен добавить трудности (большие платы: 25 ячеек, 36 ячеек)
в моем примере, если вам нужны «доски» большего размера, вы просто устанавливаете переменные rows и columns соответственно (и, конечно, убедитесь, что в вашем массиве достаточно чисел, чтобы заполнить его. Если ваша доска всегда квадратная, вы можете установить строки и столбцы программно, как rows = cols = Math.sqrt(numArr.length) - при условии, что длина массива является идеальным квадратом (16,25,36,49 и т. д.).
@DavePritlove извините, но я не совсем понял, как я могу программно изменить размер строки и столбца.
замените let cols=4 и let rows=4 операторами `let cols=rows=Math.sqrt(numArr.length);. That will take the square root of the number of elements you have and set both rows and cols to that value. Yes, you can use two equal signs as they are присваивания`, а не равенствами. Если длина вашего массива не является квадратным числом (4,9,16,25,36 и т. д.), это приведет к ошибке, поэтому будьте осторожны.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Этот метод достигает конечной цели, но не использует array.pop (что потребовало бы сложности случайного перемешивания в массиве (см. Как рандомизировать (перетасовать) массив JavaScript?)
Он просто повторяет вложенный цикл для каждой строки и столбца, каждый раз выбирая случайный элемент, при этом этот элемент удаляется после использования. Обратите внимание, что array.length как множитель для случайного числа (диапазон 0-1) заботится о том, чтобы случайный индекс всегда находился в диапазоне для укороченного массива.
let numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
let rows=4;
let cols=4;
let markup = "";
let randomIndex = 0;
for (let row=0; row<rows; row++) {
markup += "<tr>"
for (let col=0; col<cols; col++) {
randomIndex = Math.floor(Math.random()*numArr.length);
markup += `<td>${numArr[randomIndex]}</td>`;
numArr.splice(randomIndex, 1); // removed used value;
} // next col;
markup += "</tr>";
} // next row;
const table = document.createElement('table');
table.innerHTML = markup;
document.body.appendChild(table);table, td {
border: 1px solid black;
font-family: monospace;
text-align: right;
}
table {
border-collapse: collapse;
}
td {
width: 2em;
}большое спасибо ! я чуть не пробил свой компьютер этим вопросом
здорово. Спросите, есть ли какие-то кусочки, которые вы не получили. Я использовал литерал шаблона для записи ячейки <td>${numArr[randomIndex]}</td> (очень полезно при сборке разметки в js, но эквивалентен "<td>" + numArr[randomIndex] + "</td>").
Нет, теперь я понял, вы все объяснили, большое спасибо
лол, теперь я должен иметь дело с тем, что пользователь должен нажимать кнопки в последовательности (1,2,3 и т. д.), и если это правильно, кнопка меняет цвет, но я думаю, что справлюсь с этим
Если вам нужно опубликовать будущие вопросы, найдите время, чтобы обдумать и объяснить свою проблему как можно полнее, с примерами того, какой подход вы пробовали и где были обнаружены проблемы. Следуйте советам здесь: stackoverflow.com/help/как спросить для достижения наилучших результатов. Кроме того, не забудьте принять ответ (щелкнув галочку рядом с ним), если он решил вашу проблему лучше, чем любые другие. Можно немного подождать на случай, если появятся лучшие решения, но принять одно из них, когда вы будете удовлетворены. Удачи
поп, как в методе массива
array.pop? Это действительно неэффективный способ выбора случайного элемента из массива, поскольку вам нужно создавать новую версию массива для каждой итерации.array.sliceбыло бы гораздо лучше удалить случайные элементы после их выбора и поместить в ячейку таблицы. Обязательно использоватьarray.pop? Кроме того, нужно ли вам соответствовать указанному количеству строк/столбцов в вашей таблице?