I have 3 images in an array and I randomise the index to generate them randomly but I want to generate each image 4 times. What would be the most efficient way of doing this?
Edit (Full Code):
var image_array = ["image1.png", "image2.png", "image3.png"];
function set_page()
{
var table = document.getElementById("grid");
if(table != null)
{
for(var i = 0; i < table.rows.length; i++)
{
for(var j = 0; j < table.rows[i].cells.length; j++)
{
table.rows[i].cells[j].onclick = function() {
click_cell(this);
}
//table.rows[i].cells[j].style.backgroundImage = "url('../images/back.png')";
add_cell_image(table.rows[i].cells[j]);
}
}
}
}
function click_cell(cell)
{
}
function add_cell_image(cell)
{
for(var i = 0; i <= image_array.length; i++)
{
for(var j = 0; j <= image_array.length; j++)
{
var index = create_values();
cell.innerHTML = "<img class='cell_image' align='middle' width='90' height='90' src ='../images/" + image_array[index] + "'/>";
}
}
}
function create_values()
{
return Math.floor(Math.random() * image_array.length);
}
You could use an array containing all indices and shuffle it:
<div id="cell"/>
<script>
images = ["img1", "img2", "img3"];
/**
* Shuffles array in place.
* @param {Array} a items The array containing the items.
*/
function shuffle(a) {
var j, x, i;
for (i = a.length; i; i--) {
j = Math.floor(Math.random() * i);
x = a[i - 1];
a[i - 1] = a[j];
a[j] = x;
}
}
function range(number) {
return Array.apply(null, Array(number)).map(function (_, i) {return i;});
}
function create_image(image_source) {
var img = document.createElement('img');
img.src = image_source;
img.classList.add('cell_image');
img.align = 'middle';
img.height = '90';
img.width = '90';
return img;
}
function add_cell_image(cell) {
indices = range(images.length * 4);
shuffle(indices);
for (let i = 0; i < indices.length; i++) {
image_source = "../images/" + images[indices[i] % images.length];
image = create_image(image_source);
cell.appendChild(image);
}
}
cell = document.getElementById('cell')
add_cell_image(cell);
</script>
Here's one solution. Not the most elegant but it should get you started.
The idea is to create an array of options - by concatenating your initial set of images X times. In your original question you said you wanted to repeat each image 4 times. So we'll create an array of options by concatenating your initial array 4 times.
We'll then select a random element from this options array, using .slice
, which will remove that option from the options array. We'll continue this until the options array is empty.
var image_array = [1, 2, 3]; var options = create_options(image_array, 4); function set_page(table, options) { if (table != null) { for (var i = 0; i < table.rows.length; i++) { for (var j = 0; j < table.rows[i].cells.length; j++) { var randIndex = Math.floor(Math.random() * options.length); var item = options.splice(randIndex, 1)[0]; var imgEl = create_image(item); table.rows[i].cells[j].appendChild(imgEl); } } } } function create_image(image_id) { var imgEl = document.createElement('img'); imgEl.src = "https://via.placeholder.com/350x150?text=" + image_id; imgEl.classList.add('cell_image'); imgEl.height = '90'; imgEl.width = '90'; return imgEl; } function create_options(image_array, N) { var options = []; for (var i = 0; i < N; i++) { options = options.concat(image_array); } return options; } set_page(document.getElementById('grid'), options);
<table id="grid"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.