'Random' Image Code...

IE works, Firefox doesnt...

Page 1 of 1

8 Replies - 3524 Views - Last Post: 02 June 2007 - 11:05 PM

#1 Squirrel  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 06-February 07

'Random' Image Code...

Post icon  Posted 30 May 2007 - 10:45 PM

I have this code on my page...
<script language="javascript" type="text/javascript">
			<!-- Begin
			var rndprog=0;
			var rndvid=0;
			var rndpic=0;
			
			rndprog = Math.floor(2*Math.random()+1);	
			if (rndprog==1)
			{ randomprogram.src='images/thumb_insultgenerator.jpg' };
			if (rndprog==2)
			{ randomprogram.src='images/thumb_income.jpg' };
			
			rndvid = Math.floor(13*Math.random()+1);
			if (rndvid==1)
			{ randomvideo.src='images/thumb_aimeesnowangel.jpg' };
			if (rndvid==2)
			{ randomvideo.src='images/thumb_asuwheelie.jpg' };
			if (rndvid==3)
			{ randomvideo.src='images/thumb_butane.jpg' };
			if (rndvid==4)
			{ randomvideo.src='images/thumb_caralarm.jpg' };
			if (rndvid==5)
			{ randomvideo.src='images/thumb_chikfila.jpg' };
			if (rndvid==6)
			{ randomvideo.src='images/thumb_christmas.jpg' };
			if (rndvid==7)
			{ randomvideo.src='images/thumb_halloween.jpg' };
			if (rndvid==8)
			{ randomvideo.src='images/thumb_jhop.jpg' };
			if (rndvid==9)
			{ randomvideo.src='images/thumb_largestyet.jpg' };
			if (rndvid==10)
			{ randomvideo.src='images/thumb_monitor.jpg' };
			if (rndvid==11)
			{ randomvideo.src='images/thumb_snowmen.jpg' };
			if (rndvid==12)
			{ randomvideo.src='images/thumb_tv.jpg' };
			if (rndvid==13)
			{ randomvideo.src='images/thumb_wheelie.jpg' };

			rndpic = Math.floor(12*Math.random()+1);
			if (rndvid==1)
			{ randompicture.src='pictures/thumbs/thumb_aimeereturns.jpg' };
			if (rndvid==2)
			{ randompicture.src='pictures/thumbs/thumb_brianandjackie.jpg' };
			if (rndvid==3)
			{ randompicture.src='pictures/thumbs/thumb_jackiewithdetonator.jpg' };
			if (rndvid==4)
			{ randompicture.src='pictures/thumbs/thumb_lighter.jpg' };
			if (rndvid==5)
			{ randompicture.src='pictures/thumbs/thumb_lightingbomb.jpg' };
			if (rndvid==6)
			{ randompicture.src='pictures/thumbs/thumb_locknload.jpg' };
			if (rndvid==7)
			{ randompicture.src='pictures/thumbs/thumb_lolshoe.jpg' };
			if (rndvid==8)
			{ randompicture.src='pictures/thumbs/thumb_naughtyprinter.jpg' };
			if (rndvid==9)
			{ randompicture.src='pictures/thumbs/thumb_nickandtree.jpg' };
			if (rndvid==10)
			{ randompicture.src='pictures/thumbs/thumb_nickheadrub.jpg' };
			if (rndvid==11)
			{ randompicture.src='pictures/thumbs/thumb_rockyourfaceoff.jpg' };
			if (rndvid==12)
			{ randompicture.src='pictures/thumbs/thumb_speck.jpg' };
			if (rndvid==13)
			{ randompicture.src='pictures/thumbs/thumb_speckshand.jpg' };
			if (rndvid==14)
			{ randompicture.src='pictures/thumbs/thumb_speckshouse.jpg' };
			if (rndvid==15)
			{ randompicture.src='pictures/thumbs/thumb_trainguestbook.jpg' };
			if (rndvid==16)
			{ randompicture.src='pictures/thumbs/thumb_itsabomb.jpg' };

			// End -->
			</script>


I don't do Java usually so maybe you can tell me why it works in IE but fails to work in FireFox :-/ Personally I'm not a fan of firefox because of these quarks but maybe someone can redeem it?

This post has been edited by skyhawk133: 31 May 2007 - 08:44 PM


Is This A Good Question/Topic? 0
  • +

Replies To: 'Random' Image Code...

#2 PennyBoki  Icon User is offline

  • system("revolution");
  • member icon

Reputation: 53
  • View blog
  • Posts: 2,334
  • Joined: 11-December 06

Re: 'Random' Image Code...

Posted 31 May 2007 - 12:54 AM

Quote

I don't do Java usually so maybe you can tell me why it works in IE but fails to work in FireFox :-/ Personally I'm not a fan of firefox because of these quarks but maybe someone can redeem it?


This is Java??? Well I think this is Javascript which is not the same thing with Java (not even close). So next time post in the HTML/CSS/Javascript forum.
Was This Post Helpful? 0
  • +
  • -

#3 1lacca  Icon User is offline

  • code.rascal
  • member icon

Reputation: 44
  • View blog
  • Posts: 3,822
  • Joined: 11-August 05

Re: 'Random' Image Code...

Posted 31 May 2007 - 01:22 AM

Moved to Javascript thread.
Was This Post Helpful? 0
  • +
  • -

#4 Squirrel  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 06-February 07

Re: 'Random' Image Code...

Post icon  Posted 31 May 2007 - 05:43 PM

 <script language="javascript" type="text/javascript">
			<!-- Begin
			var rndprog=0;
			rndprog = Math.floor(2*Math.random()+1);	
			switch(rndprog)
			{
			case 1: 
				document.write("\"Insult Generator\"")
				randomprogram.src='images/thumb_insultgenerator.jpg'
				break
			case 2:	
				document.write("\"Income Calculator\"")
				randomprogram.src='images/thumb_income.jpg'
				break
			}
			// End -->
			</script> 

Thats a problem in both this time... any suggestions?

This post has been edited by Squirrel: 31 May 2007 - 06:25 PM

Was This Post Helpful? 0
  • +
  • -

#5 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: 'Random' Image Code...

Posted 31 May 2007 - 08:42 PM

You seem to be missing some semi-colons inside your JS. I don't think that's the only issue, but that could be part of it.
Was This Post Helpful? 0
  • +
  • -

#6 Squirrel  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 06-February 07

Re: 'Random' Image Code...

Posted 31 May 2007 - 11:57 PM

View Postgirasquid, on 31 May, 2007 - 08:42 PM, said:

You seem to be missing some semi-colons inside your JS. I don't think that's the only issue, but that could be part of it.


I assumed so, but i dont know enough about Javascript to know where/when
Was This Post Helpful? 0
  • +
  • -

#7 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: 'Random' Image Code...

Posted 01 June 2007 - 07:33 AM

Your code exhibits some poor practice.

Poor Practice: HTML
  • Donít use the language attribute.
  • Donít use SGML comments within the script element. In other words, donít use <!-- or -->.
  • Just an FYI: The media type text/javascript is, technically, outdated. Internet Explorer doesnít support application/javascript or application/ecmascript though, so youíll end up using the incorrect media type anyway.

Poor Practice: Javascript
  • Donít put semicolons after the Right Curly Bracket (}) of an if statement.
  • Do close expressions with a semicolon. Unfortunately, Iím not sure if ďexpressionsĒ is the correct term. To make things clearer: document.write();, break;, and lines where something is assigned using the assignment operator (the Equals Sign (=)) are examples of things that should end with a semicolon.
  • Donít use the document.write(); method. Use DOM methods to write content to a document instead.
  • Use DOM methods to create new elements. For example, use var image = document.createElement("img");.
  • Use generic DOM methods to declare new attributes. For example, use image.setAttribute("src", "image.png");.
  • Donít use if for every statement if theyíre related; use if for the first statement and else if for subsequent occurrences. If you do otherwise (what you are currently doing), all of the subsequent if statements are checked even after a match has been found.

Errors: Javascript
  • The randomprogram variable is not declared and does not refer to an img element.

You might want to learn how Math.random() works. Try reading the article Make Javascript Math.random() Useful. After reading it, you should be able to tell that your first and fourth use of the Math.random() method only generates integers between 2 and 3 inclusive; the second only generates integers between 13 and 25 inclusive; and the third between 12 and 23 inclusive. This is clearly not what you wanted, since some of the values that youíre trying to match fall out of those ranges.

Finally, I wrote an example random image generator seven days ago. It demonstrates the correct way to write such a script (compatible with Firefox, Opera, et al) and, at the same time, a second, semi‐correct script demonstrates a method thatís compatible with Internet Explorerís lack of support. See Demo CF114985.

You probably wonít understand some of the things. I would start learning the stuff shown at W3C DOM Compatibility - Core. To see how I served code separately to Internet Explorer, read CSS - Conditional Comments.

If you have any more questions after all of that, do some research or ask around.
Was This Post Helpful? 0
  • +
  • -

#8 Squirrel  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 06-February 07

Re: 'Random' Image Code...

Posted 02 June 2007 - 01:30 PM

I understand actually what they are supposed to do, but I still cant get this line of code to work in IE. The image tag in question is named "randomprogram" so it should adjust it accordingly but it wont. Any ideas?

var randomprogram = document.createElement("randomprogram");
			var rndprog=0;
			rndprog = Math.floor(2*Math.random()+1);
			
			switch(rndprog)
			{
			case 1: 
				randomprogram.setAttribute("src", "images/thumb_insultgenerator.jpg");
				break;	
			case 2:	
				randomprogram.setAttribute("src", "images/thumb_income.jpg");
				break;
			}

Was This Post Helpful? 0
  • +
  • -

#9 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: 'Random' Image Code...

Posted 02 June 2007 - 11:05 PM

Arbitrator, on Posted 1 Jun, 2007 - 09:33 AM, said:

After reading it, you should be able to tell that your first and fourth use of the Math.random() method only generates integers between 2 and 3 inclusive; the second only generates integers between 13 and 25 inclusive; and the third between 12 and 23 inclusive. This is clearly not what you wanted, since some of the values that you’re trying to match fall out of those ranges.
I realize that I forgot the order of operations, so this information is incorrect. I believe that your use of Math.random() is correct.

View PostSquirrel, on 2 Jun, 2007 - 03:30 PM, said:

I understand actually what they are supposed to do, but I still cant get this line of code to work in IE. The image tag in question is named "randomprogram" so it should adjust it accordingly but it wont. Any ideas?
  • randomprogram is not a valid element name in HTML 4.01. If you want to add an image, you use the img or object elements.
  • Once you create the element using createElement(), you need to add it to the document by using something like appendChild() or insertBefore().
  • If you’re altering the src attribute of an existing image, you wouldn’t use createElement() at all. Instead, you would target the element through the use of getElementById(), getElementsByTagName(), or some other method. If you’re trying to target it by reference to a name attribute, you shouldn’t be; those are obsolete (in favor of IDs) except on form control elements.
An example revision of your last code snippet as it applies to an existing image:

<img id="content" alt="…" width="…" height="…" src="…">
var image = document.getElementById("randomprogram");
var rndprog = Math.floor((2 * Math.random()) + 1);
switch(rndprog) {
	case 1:
		image.setAttribute("src", "images/thumb_insultgenerator.jpg");
		break;	
	case 2:	
		image.setAttribute("src", "images/thumb_income.jpg");
		break;
}

If the image is meaningless without Javascript, then I would create and insert it entirely using Javascript so that it’s not seen when the user has Javascript disabled. For example, if the alt, width, height, or src attributes are initially missing from the source (or left blank) because they need to be filled in via script, then this would apply. Example:

<div id="gallery"></div>
var image = document.createElement("img");
var rndprog = Math.floor((2 * Math.random()) + 1);
switch(rndprog) {
	case 1:
		image.setAttribute("alt", "<description>");
		image.setAttribute("width", "<width>");
		image.setAttribute("height", "<height>");
		image.setAttribute("src", "images/thumb_insultgenerator.jpg");
		break;	
	case 2:	
		image.setAttribute("alt", "<description>");
		image.setAttribute("width", "<width>");
		image.setAttribute("height", "<height>");
		image.setAttribute("src", "images/thumb_income.jpg");
		break;
}
document.getElementById("gallery").appendChild(image);

Note that the width and height attributes are recommended, but optional. The alt attribute is required in HTML 4.01.

This post has been edited by Arbitrator: 02 June 2007 - 11:07 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1