Question

22

Set div id's from array content

rated 0 times [ 25] [ 3] / answers: 1 / hits: 22951 / 11 Years ago, sat, march 23, 2013, 12:00:00

I'm trying to figure out how to give 16 different divs the id names that are stored in a 16 elements long array.

This is so that I can randomize the divs placement for a memory game, since there will be 8 different div styles that will change along with the div id if that is possible.

My plan is to have the same name for the div id as for the style for that specific div.

Is there any way to set the first div's id and style as the value in myarray[0], and the second div's id and style as myarray[1], and so on?

EDIT:

var card = [orange,orange,pink,pink,red,red,purple,purple,

blue,blue,green,green,brown,brown,yellow,yellow];



for(var j, x, i = card.length; i; j = parseInt(Math.random() * i),

x = card[--i], card[i] = card[j], card[j] = x);

then later in the body I'm trying to achieve something that represents this:

<div id=card[0]></div>

<div id=card[1]></div>

<div id=card[2]></div>

and so on...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zariahdiamondz

Add To Favorites

Follow

Total Points: 649

Total Questions: 109

Total Answers: 88

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

zariahdiamondz questions

1 Get esbuild to watch for changes, rebuild, and restart express server

Wed, Jul 13, 22, 00:00, 2 Years ago

1 ethers js exits with this error=> invalid BigNumber value (argument=value, value=undefined, code=INVALID_ARGUMENT, version=bignumber/5.5.0)

Thu, Nov 4, 21, 00:00, 3 Years ago

1 react-data-table-component: access the selected row and assign it to setState

Tue, Jun 15, 21, 00:00, 3 Years ago

1 An argument for 'id' was not provided. angular 11

Tue, Apr 20, 21, 00:00, 3 Years ago

1 How to open offcanvas from offcanvas

Thu, Apr 8, 21, 00:00, 3 Years ago

View All

answered 11 Years ago emilianoc · Accepted Answer

Here is a solution for randomising class names using pure JavaScript.

Updated answer

I have updated my solution now that the question was clarified, here is it adapted to your colors. I have set the background-color of the .cards to the colors set in the array. This could easily be done using the id as well, I recommend against using [] characters in an id though as I think I'm not sure if that's standards compliant.

jsFiddle

enter

var colors = [

    orange,orange,pink,pink,red,red,purple,purple,

    blue,blue,green,green,brown,brown,yellow,yellow

];



var divs = document.getElementsByClassName(card);



while (divs.length > 0) {

    var i = Math.floor(Math.random() * colors.length);

    divs[0].style.backgroundColor = colors[i];

    colors.splice(i, 1);

    divs = [].slice.call(divs, 1);

}

Original answer

Given an array of ids and a set of HTML elements, a random id will be assigned to each element from ids.

jsFiddle

enter

JavaScript

var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var divs = document.getElementsByClassName(game-element);



while (divs.length > 0) {

    var i = Math.floor(Math.random() * ids.length);

    divs[0].id = 'item-' + ids[i];

    ids.splice(i, 1);

    divs = [].slice.call(divs, 1);

}

HTML

<div class=game-element></div>

<div class=game-element></div>

<div class=game-element></div>

<div class=game-element></div>

<div class=game-element></div>

<div class=game-element></div>

<div class=game-element></div>

<div class=game-element></div>

<div class=game-element></div>

<div class=game-element></div>

CSS

.game-element {

    width:10px;

    height:10px;

    float:left;

}



#item-1  { background-color:#F00; }

#item-2  { background-color:#0F0; }

#item-3  { background-color:#00F; }

#item-4  { background-color:#FF0; }

#item-5  { background-color:#F0F; }

#item-6  { background-color:#0FF; }

#item-7  { background-color:#A0A; }

#item-8  { background-color:#0AA; }

#item-9  { background-color:#AA0; }

#item-10 { background-color:#000; }