Number to Image JS

JavaScript
1

Hi I am trying to create a picture bingo for my website. I am using the traditional bingo card generator with the following code:

window.onload = newCard;
var usedNums = new Array(76);

function newCard() {
     if (document.getElementById) {
        for (var i=0; i<24; i++) {
           setSquare(i);
        }
     }
     else {
        alert("Sorry, your browser doesn't support this script");
     }
}

function setSquare(thisSquare) {
     var currSquare = "square" + thisSquare;
     var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
     var colBasis = colPlace[thisSquare] * 15;
     var newNum;
     do {
        newNum = colBasis + getNewNum() + 1;
     }
     while (usedNums[newNum]);

     usedNums[newNum] = true;
     document.getElementById(currSquare). innerHTML = newNum;
}
	 
	

function getNewNum() {
     return Math.floor(Math.random() * 15);
}

My Question is that once the number is generated, can anyone tell me what code I should use to change the number into an image?

I would like to say if the number 1 is chosen then display a the picture from 123picture.jpg (i.e.). Can anyone help? I would greatly appreciate it…

Thanks!

Joe

2

If you have your image names in an array, you can use that number to refer to one of them (counting starts from 0)


var images = [
    'thisimage.jpg',
    'thatimage.jpg',
    'anotherimage.jpg'
    'someotherimage.jpg'
];
...
var image = images[newNum];
3

how do I convert it so instead of displaying the number 1 it displays the image. Would I need some sort of replace code?

4

You would want to make the HTML element that’s identified by “currSquare” an image, by using the IMG tag.


<img id="square1" src="">
...

You can then use the script to set the src property of that IMG element.


document.getElementById(currSquare).src = images[newNum];
5

It does not seem to be working. Can you show me in the original code? I must be missing something. I am very new at this and really appreciate all your help…

6

I have not ben writing or testing with any original code yet. At this stage I have been providing general-purpose help and assistance.

I can though help you to make modifications to your existing code, so that you can achieve what you require.

7

Here is the Original JS:

window.onload = newCard;
var usedNums = new Array(76);

function newCard() {
if (document.getElementById) {
for (var i=0; i<24; i++) {
setSquare(i);
}
}
else {
alert(“Sorry, your browser doesn’t support this script”);
}
}

function setSquare(thisSquare) {
var currSquare = “square” + thisSquare;
var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
var colBasis = colPlace[thisSquare] * 15;
var newNum;
do {
newNum = colBasis + getNewNum() + 1;
}
while (usedNums[newNum]);

 usedNums[newNum] = true;
 document.getElementById(currSquare). innerHTML = newNum;

}

function getNewNum() {
return Math.floor(Math.random() * 15);
}

8

Here is the HTML as well:
<head>
<title>Make Your Own Bingo Card</title>
<link rel=“stylesheet” rev=“stylesheet” href=“file:///Macintosh HD/Users/joehumberger/Documents/script01.css” />
<script src=“/script01.js” type=“text/javascript” language=“javascript”></script>
</head>
<body>

<h1>NewsRadio 960 WSBT - Bingo Card</h1>

<table>
<tr>
<th width=“20%”>A</th>
<th width=“20%”>M</th>
<th width=“20%”>9</th>
<th width=“20%”>6</th>
<th width=“20%”>0</th>
</tr>
<tr>
<td id=“square0”> 
<td id=“square1”> </td>
<td id=“square2”> </td>
<td id=“square3”> </td>
<td id=“square4”> </td>
</tr>
<tr>
<td id=“square5”> </td>
<td id=“square6”> </td>
<td id=“square7”> </td>
<td id=“square8”> </td>
<td id=“square9”> </td>
</tr>
<tr>
<td id=“square10”> </td>
<td id=“square11”> </td>
<td id=“WSBT”>WSBT</td>
<td id=“square12”> </td>
<td id=“square13”> </td>
</tr>
<tr>
<td id=“square14”> </td>
<td id=“square15”> </td>
<td id=“square16”> </td>
<td id=“square17”> </td>
<td id=“square18”> </td>
</tr>
<tr>
<td id=“square19”> </td>
<td id=“square20”> </td>
<td id=“square21”> </td>
<td id=“square22”> </td>
<td id=“square23”> </td>
</tr>
</table>
<p><a href=“file:///Macintosh HD/Users/joehumberger/Documents/script01.html” id=“reload”> Click here</a> to create a new card</p>
</body>
</html>

9

Thank you so much Paul for helping me with this!

10

Okay, when setting square14 to be a number, you want it to be the image of a number, such as “http://www.sitepoint.com/forums/images/bingo5.png”

You can do that by creating an image, setting the src attribute of the image to your desired file name, and replace whatever is in the TD element with that image.

Here’s how you create the image:


var image;
...
image = new Image();

If the width and height of each image will be the same, you can put that in there:


var image = new Image(50, 50);

Then you set the src attribute of the image:


image.src = 'images/bingo' + newNum + '.png';

And then you remove whatever is in the TD element, and append the image in there instead:


if (document.getElementById(currSquare).hasChildNodes()) {
    document.getElementById(currSquare).removeChild(document.getElementById(currSquare).firstChild);
}

}
document.getElementById(currSquare).appendChild(image);

Let’s now put that in a function, to help simplify things:


function empty(el) {
    if (el.hasChildNodes()) {
        el.removeChild(el.firstChild);
    }
}

Now you can use that empty function in your code, like this:


function setSquare(thisSquare) {
    var currSquare = [color="green"]document.getElementById("square" + thisSquare);[/color]
    var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
    var colBasis = colPlace[thisSquare] * 15;
    var newNum;
    var image;

    do {
        newNum = colBasis + getNewNum() + 1;
    } while (usedNums[newNum]);
    usedNums[newNum] = true;

    [color="green"]image = new Image();
    image.src = 'images/bingo' + newNum + '.png';

    empty(currSquare);
    currSquare.appendChild(image);[/color]
}
11

Paul - thank you again for helping me. I am still missing something. This is what the code looks like on my end:
window.onload = newCard;
var usedNums = new Array(76);

var image = new images (50, 50);
image.src - ‘https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg’
function newCard() {
if (document.getElementById(currSquare).hasChildNodes(12)) {
document.getElementById(currSquare).removeChild(document.getElementById(currSquare).firstChild);
}

}
function empty(el) {
if (el.hasChildNodes()) {
el.removeChild(el.firstChild);
}
}
function setSquare(thisSquare) {
var currSquare = document.getElementById(“square” + thisSquare);
var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
var colBasis = colPlace[thisSquare] * 15;
var newNum;
var image;

do {
    newNum = colBasis + getNewNum() + 1;
} while (usedNums[newNum]);
usedNums[newNum] = true;

image = new Image();
image.src = 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg';

empty(currSquare);
currSquare.appendChild(image);

}

12

Can you please provide a link to an online test page, so that we can help with the issues that the page is having?

13

Here is the link to download the files:
http://dl.dropbox.com/u/12788568/Picture%20Bingo.zip

14

In the zip file, the script01.js file doesn’t appear to have had any changes made to it.

15

Here is the updated script file:
http://dl.dropbox.com/u/12788568/script01.js.zip

16

My apologies… Thank you again for all your help!

17

The changes you made before the empty function shouldn’t have been made.
Restore the contents of the newCard function back to what they were, and remove the invalid image stuff before it too.

18

So here is what I have now - but it is still not generating the image. I cannot express enough how grateful I am for your help.

http://dl.dropbox.com/u/12788568/scripttest.js.zip

19

Everything is uploaded here: Maybe with it being stored online, it will be easier to see where my errors are…

Make Your Own Bingo Card

20

The error that the web age is now reporting is:

empty is not defined

What do you think should be done about that?