Javascript breaks when images added

F

Fabian

This javascript is meant for learning language vocabulary, specifically
colours on this example. However, when I use images in the mtWord array,
it breaks when checking for correct answers. It works fine with text in
those spaces.

Direct links to the pages online:
http://www.lajzar.co.uk/en/colours.html
http://www.lajzar.co.uk/en/animals.html

How can I fix this so the functions work with images in that array? It
works fine with a table and appropriately coloured backgrounds, but I
cant get gold and silver that way.

Or nose at teh code pasted below...

---snip---

var mtWord = new Array (
"<IMG SRC='blue.png'>",
"<IMG SRC='green.png'>",
"<IMG SRC='orange.png'>",
"<IMG SRC='pink.png'>",
"<IMG SRC='white.png'>",
"<IMG SRC='black.png'>",
"<IMG SRC='yellow.png'>",
"<IMG SRC='red.png'>",
"<IMG SRC='gold.png'>",
"<IMG SRC='silver.png'>",
"<IMG SRC='brown.png'>",
"<IMG SRC='purple.png'>"
);

var enWord = new Array(
"blue",
"green",
"orange",
"pink",
"white",
"black",
"yellow",
"red",
"gold",
"silver",
"brown",
"purple"
);

var mtOrder = new Array(12); // the number of items in the arrays above
var enOrder = new Array(12); // the number of items in the arrays above
var picNum = new Array(36); // the number of problems to display x 3

var maxProb = 6; // the number of problems to display
var Riable = 12; // the number of items in the arrays above

/*********************************************************************
mixes up n elements of nArray starting at element startAt
**********************************************************************/
function Shuffle( nArray, startAt, n ) {
var i, j, swap;
for (i = startAt; i < startAt + n; i++) {
j = startAt + Math.round(Math.random() * (n - 1));
swap = nArray;
nArray = nArray[j];
nArray[j] = swap;
}
}

function showProblems() {
var i, j, n, prob, pnum;
var d, str, picname;

for (i=0; i<Riable; i++) { mtOrder = i; }
Shuffle( mtOrder, 0, Riable );
for (i=0; i<maxProb; i++) { enOrder = mtOrder; }
Shuffle( enOrder, 0, maxProb );

pnum = 0;
d = top.document;
d.open();
for (prob=0; prob<maxProb; prob++) {
picNum[prob] = pnum++;
d.write("<TR>\n<TD><IMG NAME='pic", prob, "'
SRC='null.gif'></TD>\n");
d.write("<TD><INPUT TYPE='text' NAME='in", prob, "'
SIZE=1></TD>\n");
d.write("<TD>", mtWord[mtOrder[prob]], "</TD>\n");
d.write("<TD WIDTH=20></TD>\n");
d.write("<TD>",prob+1,". ", enWord[enOrder[prob]],
"</TD>\n</TR>\n\n");
}
d.close();
}

function checkAnswers() {
var i;
var ok;
var estr;

for (i=0; i<maxProb; i++) {
ok = false;
n = parseInt( top.document.qform.elements.value );
if ((! isNaN(n)) && n >= 1 && n <= maxProb ) {
if (enOrder[n-1] == mtOrder) { ok = true; }
}
if (ok) { estr = "yay.gif"; }
else { estr = "nay.gif"; }
top.document.images[picNum].src = estr;
}
}

function doNull() { }
// -->
</SCRIPT>
</HEAD>

<BODY>


<FORM NAME="qform">
<TABLE border=1>
<SCRIPT LANGUAGE="JavaScript">
<!--
showProblems()
// -->
</SCRIPT>
</TABLE>
</FORM>

<HR>
<P>Type the number of the correct English word before each English word,
then click the
<A HREF="javascript:doNull()" onclick="checkAnswers();">here</A> to see
if you're right.</P>

---end snip---
 
G

Graham J

top.document.images[picNum].src = estr;

I got a little tied in a knot following the code but I would say this line
is the problem. picNum seems to be an integer so when you try to change
the images you are acting on the first six (or whatever) images on the page.
This will be OK when they are the first six images on the page but with the
images being used for the colours too they aren't any more, they are more
like 0, 2, 4... etc and if you add an image higher up for decoration that
will break it too.

I believe you want to be giving an argument of the form "pic1", "pic2" etc
to access those images by their name. So that would make it something like
top.document.images['pic'+picNum].src I think. As I say I got a bit tied
up!
 
F

Fabian

Graham J said:
top.document.images[picNum].src = estr;


I got a little tied in a knot following the code but I would say this line
is the problem. picNum seems to be an integer so when you try to change
the images you are acting on the first six (or whatever) images on the page.
This will be OK when they are the first six images on the page but with the
images being used for the colours too they aren't any more, they are more
like 0, 2, 4... etc and if you add an image higher up for decoration that
will break it too.

I believe you want to be giving an argument of the form "pic1", "pic2" etc
to access those images by their name. So that would make it something like
top.document.images['pic'+picNum].src I think. As I say I got a bit tied
up!


Thanks! That fixed the problem perfectly!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top