Inputing images into an array in Javascript and then displaying them in a table

Question

In this block of code I am loading some images of dice, and trying to display a few of those in the table. I am not sure if I am even building the array right, but this was one of the examples I found of propagating an array with images.

<table id="dicebox">
                <tr>
                    <td id="d1"></td>
                    <td id="d2"></td>
                    <td id="d3"></td>
                    <td id="d4"></td>
                    <td id="d5"></td>
                </tr>
            </table>
<script>

            var diceB = new Array(7);
            //Blue dice
            var diceP = new Array(7);
            //Purple dice
            var diceValue = new Array(0, 1, 2, 3, 4, 5, 6);

            //initializing blue dice array
            diceB[0] = new Image(50, 50);
            diceB[0].src = "images/dice0B.gif"
            diceB[1] = new Image(50, 50);
            diceB[1].src = "images/dice1B.gif"
            diceB[2] = new Image(50, 50);
            diceB[2].src = "images/dice2B.gif"
            diceB[3] = new Image(50, 50);
            diceB[3].src = "images/dice3B.gif"
            diceB[4] = new Image(50, 50);
            diceB[4].src = "images/dice4B.gif"
            diceB[5] = new Image(50, 50);
            diceB[5].src = "images/dice5B.gif"
            diceB[6] = new Image(50, 50);
            diceB[6].src = "images/dice6B.gif"


            for(var i = 1; i < 6; i++) {
                document.getElementById('d' + i).innerHTML = diceB[i].src;

What do you mean by "dice"?

SaidbakR
– SaidbakR

2012-12-04 21:38:33 +00:00
Commented Dec 4, 2012 at 21:38 — SaidbakR
– SaidbakR, Commented Dec 4, 2012 at 21:38
The things you roll in games

Zach M.
– Zach M.

2012-12-04 23:37:17 +00:00
Commented Dec 4, 2012 at 23:37 — Zach M.
– Zach M., Commented Dec 4, 2012 at 23:37

Musa · Accepted Answer · 2012-12-04 21:38:28Z

1

How about using appendChild

for(var i = 1; i < 6; i++) {
    document.getElementById('d' + i).appendChild(diceB[i]);

answered Dec 4, 2012 at 21:38

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Levi Botelho Over a year ago

Can you append an Image object directly or do you need to create an image tag?

Musa Over a year ago

@LeviBotelho Image tags is used in html mark up, image object is used in the DOM

SaidbakR · Accepted Answer · 2012-12-04 21:40:54Z

1

You did not write an image tag, you have to do the following:

for(var i = 1; i < 6; i++) {
                document.getElementById('d' + i).innerHTML = '<img src="'+diceB[i].src+'" />';

}

answered Dec 4, 2012 at 21:40

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

Collectives™ on Stack Overflow

Inputing images into an array in Javascript and then displaying them in a table

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related