By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,948 Members | 1,559 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,948 IT Pros & Developers. It's quick & easy.

Javascript breaks when images added

P: n/a
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[i];
nArray[i] = 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] = i; }
Shuffle( mtOrder, 0, Riable );
for (i=0; i<maxProb; i++) { enOrder[i] = mtOrder[i]; }
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[i].value );
if ((! isNaN(n)) && n >= 1 && n <= maxProb ) {
if (enOrder[n-1] == mtOrder[i]) { ok = true; }
}
if (ok) { estr = "yay.gif"; }
else { estr = "nay.gif"; }
top.document.images[picNum[i]].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---
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
> top.document.images[picNum[i]].src = estr;

I got a little tied in a knot following the code but I would say this line
is the problem. picNum[i] 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[i]].src I think. As I say I got a bit tied
up!

Jul 20 '05 #2

P: n/a

"Graham J" <in***************@orangebucket.co.uk> wrote in message
news:bn************@ID-203032.news.uni-berlin.de...
top.document.images[picNum[i]].src = estr;
I got a little tied in a knot following the code but I would say this

line is the problem. picNum[i] 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[i]].src I think. As I say I got a bit tied up!


Thanks! That fixed the problem perfectly!
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.