Generate table with images on javascript

Question

I want to create a button that produces a 3x3 HTML table meant for a card game, where each cell corresponds to one single image. For the time being, I'm mainly focusing on filling individual cells with a card number taken from an array element, using a step-by-step rationale. This is what the final result should look like in HTML, derived from the produced script;

<table style="width:100%"> <tr> <td><img src="1.png"></td> <td><img src="2.png"></td> <td><img src="3.png"></td> </tr> <tr> <td><img src="4.png"></td> <td><img src="5.png"></td> <td><img src="6.png"></td> </tr> <tr> <td><img src="7.png"></td> <td><img src="8.png"></td> <td><img src="9.png"></td> </tr> </table>

This is what I'm currently working at, although with not much success

<!DOCTYPE html> <html> <body> <table id="1"> </table> <button onclick="createTable()">Create</button> <script> function createTable() { var deck = [1,2,3,4,5,6,7,8,9]; function shuffle(o) { //v1.0 for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; } shuffle(deck); document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" + "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" + "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>" + ; } </script> </body> </html>

Note The 9-card deck is shuffled using a pretty basic and self-explanatory function.

Edit. My final version, which is returning broken image.

<!DOCTYPE html> <html> <body> <table id="1"> </table> <button onclick="createTable()">Create</button> <script> function createTable() { var deck = [1,2,3,4,5,6,7,8,9]; function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; } shuffle(deck); document.getElementById("1").innerHTML = "<tr><td><img src=" + deck[0] + ".png'></td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" + "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" + "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>" ; } </script> </body> </html>

In your final version, you have an extra apostrophe after png string. You need to either append an apostrophe after the src=, so there are apostrophes around the filename in the final html, like src='1.png', or you have to remove the extra apostrophe which will result in html without apostrophes, containing src=1.png — Tomas M
– Tomas M, Commented Dec 26, 2015 at 13:29

Tomas M · Accepted Answer · 2015-12-26 13:08:49Z

2

After you fix your code by removing the extra + at the last line where you build your html (tr's and td's), you will simply need just to replace

"<td>" + deck[0] + "</td>"

by

"<td><img src='" + deck[0] + ".png'></td>"

... and so on for other indexes like deck[1], deck[2] etc.

answered Dec 26, 2015 at 13:08

Tomas M

7,4138 gold badges30 silver badges36 bronze badges

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

5 Comments

John Over a year ago

Exactly what I was lokking for, but for some reason FIrefox/Chrome isn't showing them (I get broken image icon instead). All 9 PNGs are in the same folder with the script.

Tomas M Over a year ago

Then you have probably some error in your html code. Post it here (just the innerHTML assignment) so I could review it.

John Over a year ago

You can view it from my latest edit in the first post :)

Tomas M Over a year ago

I've added my comment there. You forgot to put apostrophe after src=' ... there is actually apostrophe and doublequote in my HTML code which I am providing as answer: s r c = ' " ... please copy&paste the code carefully.

John Over a year ago

Accidentally deleted that. Thanks!

jyvet · Accepted Answer · 2015-12-26 13:05:27Z

You have got an extra "+"

document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" + "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" + "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>";

Should work better.

Community · Accepted Answer · 2017-05-23 11:44:51Z

Your shuffle() is pretty convoluted. Let me advise you to write less exotic code. Making your code more readable will help to find potential errors. Indeed, the problem is not so hard to locate actually: https://stackoverflow.com/a/34471591/1636522 :-)

var deck = [1, 2, 3, 4, 5, 6, 7, 8, 9]; document.write(JSON.stringify(shuffle(deck), 0, 1)); function shuffle (anArray) { var i, j, x, l = anArray.length; for (i = 0; i < l; i++) { j = rdmInt(l); x = anArray[i]; anArray[i] = anArray[j]; anArray[j] = x; } return anArray; } function rdmInt (max) { return Math.floor(Math.random() * max); }

The same remark applies to your string concatenation:

document.getElementById("1").innerHTML = "" + "<tr>" + "<td><img src=" + deck[0] + ".png'></td>" + "<td>" + deck[1] + "</td>" + "<td>" + deck[2] + "</td>" + "</tr>" + "<tr>" + "<td>" + deck[3] + "</td>" + "<td>" + deck[4] + "</td>" + "<td>" + deck[5] + "</td>" + "</tr>" + "<tr>" + "<td>" + deck[6] + "</td>" + "<td>" + deck[7] + "</td>" + "<td>" + deck[8] + "</td>" + "</tr>";

Can you see the error now (line 3)? Here is a fix:

+ "<td><img src=\"" + deck[0] + ".png\"></td>"

You could go even further to avoid repetitions (dry):

var deck = [ "KNhxd", "7CtbR", "Os8qX", "21SKd", "CWMZC", "43C1X", "lpGvK", "8Wk7W", "Y3JFi" ]; // preserve the global namespace with an IIFE document.body.innerHTML = function () { var ROOT = "https://i.sstatic.net/"; function toTable (deck) { var i, html = ""; for (i = 0; i < 3; i++) { html += toTr(deck.slice(i * 3, (i + 1) * 3)); } return "<table>" + html + "</table>"; } function toTr (row) { return "<tr>" + row.map(toTd).join('') + "</tr>"; } function toTd (cell) { return "<td><img src=\"" + ROOT + cell + ".png\" /></td>"; } return toTable(deck); }();

body{background:#006600;} img{display:block;width:35px;}

dading84 · Accepted Answer · 2015-12-26 13:17:06Z

If you want to create HTML elements, then you do not just write them as a text string and insert into an existing HTML element.

You create an element node (and text node if applicable) and append that to your existing HTML element.

Here is an article on w3 schools about creatung HTML tags with JavaScript.

http://www.w3schools.com/jsref/met_document_createelement.asp

If your table is always 9 cells then why not just write the HTML out giving each cell a unique id. Then u could use code similar to what u have.

document.getElementById("cell_1").innerHTML = deck[0];

You would need to include this logic for all 9 cells / values, although you could loop through them like;

for (i = 0; i < 8; i++) { var cellNo = i + 1; document.getElementById("cell_" + cellNo).innerHTML = deck[i]; }

Hope this helps ;)

Bar Goldinfeld · Accepted Answer · 2015-12-26 13:27:30Z

In addition to the unnecessary '+' at the end of your innerHTML addition, I would suggest making your code more flexible. Instead of adding the data hardcoded to your innerHTML you can do something like this:

var endOfRowCounter = 0; var toAppend = ""; deck.forEach(function(card){ if(endOfRowCounter % 3 == 0) { toAppend += "<tr>"; } toAppend += "<td><img src=\"" + card + ".png\"></td>"; if(endOfRowCounter % 3 == 2) { toAppend += "</tr>"; } endOfRowCounter++; });

The fourth bird · Accepted Answer · 2015-12-26 13:38:45Z

When I load your code I get this message in the browser console:

Uncaught SyntaxError: Unexpected token ;

It might help if you update this code:

document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" + "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" + "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>" + ;

To this:

document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" + "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" + "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>";

To loop your array and create your table structure with the images, you could do this for example:

function createTable() { var deck = [1,2,3,4,5,6,7,8,9]; function shuffle(o) { //v1.0 for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; } shuffle(deck); var html = ''; for (var i = 0; i < deck.length; i++) { if (i%3 === 0) { html += "<tr>"; } html += '<td><img src="' + deck[i] + '.png"></td>'; if (i%3 === 2) { html += "</tr>"; } } document.getElementById("1").innerHTML = html; }

Collectives™ on Stack Overflow

Generate table with images on javascript

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Related