Beginner JavaScript Problem

infamoustrey · Jun 9, 2012

So I have some really rough html and Im not checking to see if it looks good I just want it to work. I'm trying to make an gallery by using a series of switch statements and try loops and right now I'm stuck

any help would be nice. Any hate or non helpful comments are not welcomed.

The HTML

Code:

<html>
<head>
		<title>New Think Tank Lightbox</title>
		<link rel="StyleSheet" href="image_gallery.css" />
		<script type="text/javascript" src="image_gallery.js"></script>
</head>
<body>

	<div>
		<ul>
			<li><a href="#" onmousedown="prev();">Prev</a><li>
		</ul>
			<div>
				<div>
					<img src="images/bcf.jpg" height="295" width="510" id="panel"/>
				</div>
				<div>
				<img src="images/bcf.jpg" height="60" width="103" onmouseover="getBigger1();" onmouseout="getSmaller1();" onmousedown="display1();" id="img1"/>
				<img src="images/bcb.jpg" height="60" width="103" onmouseOver="getBigger2();" onmouseout="getSmaller2();" onmousedown="display2();" id="img2"/>
				</div>
			</div>
		<ul>
			<li><a href="#" onmousedown="next();">Next</a></li>
		</ul>
	</div>
</body>
</html>

The JavaScript

Code:

onload="gallery();"
//functions for image 1
function getBigger1() {
	document.getElementById("img1").width="155";
	document.getElementById("img1").height="100";
}
function getSmaller1() {
	document.getElementById("img1").width="103";
	document.getElementById("img1").height="60";
}
function display1() {
	document.getElementById("panel").src="images/bcf.jpg";
}

//functions for image 2
function getBigger2() {
	document.getElementById("img2").width="155";
	document.getElementById("img2").height="100";
}
function getSmaller2() {
	document.getElementById("img2").width="103";
	document.getElementById("img2").height="60";
}
function display2() {
	document.getElementById("panel").src="images/bcb.jpg";
}
//variables
var i = 1

function gallery() {
	try {
		switch(i) {
			case 1:
				document.getElementById("panel").src="images/bcf.jpg";
			break;
			case 2:
				document.getElementById("panel").src="images/bcb.jpg";
			break;
			default:
				document.getElementById("panel").src="images/bcf.jpg";
}
	}catch (err){
		alert("Yeah Didn't work!");
	}
}

function prev() {
	var i = -1;
	return true
}

function next() {
	var i = +1;
	return true
}

Ken g6 · Jun 9, 2012

infamoustrey said:
Any hate or non helpful comments are not welcomed.

That's true of these forums in general, for the most part.

OK, let's look at this code. I guess you're trying to use the prev() and next() functions to change images. Well, first of all, you've created this var i in the global scope. So far so good, except that this is one of several places where you don't end lines in ";". That may work in many cases, but it's just good practice to add that ";" in case you change your code later on and it doesn't work.

Then later in prev(), you set the local variable i to -1. And then...nothing - you just return.

Scope and semis are syntactic problems with your code. But overall, it looks like you haven't really figured out what you want the code to do. I suggest you step back and write, in plain English, what it is you want each function to do. This is best written in comments (// or /*...*/) before the start of each function. Then, with that in mind, go back through and try to make each function do what you wrote you wanted it to do.

Good luck!

P.S. This looks like homework to me. If so, you should clearly state so in your post.

infamoustrey · Jun 9, 2012

Hey I tried what you said and placed a time interval in which it will execute the code.

Code:

onload="galleryChecker();"
//functions for image 1
function getBigger1() {
	document.getElementById("img1").width="155";
	document.getElementById("img1").height="100";
}
function getSmaller1() {
	document.getElementById("img1").width="103";
	document.getElementById("img1").height="60";
}
function display1() {
	document.getElementById("panel").src="images/bcf.jpg";
}

//functions for image 2
function getBigger2() {
	document.getElementById("img2").width="155";
	document.getElementById("img2").height="100";
}
function getSmaller2() {
	document.getElementById("img2").width="103";
	document.getElementById("img2").height="60";
}
function display2() {
	document.getElementById("panel").src="images/bcb.jpg";
}
//variables
var i = 1;

function galleryChecker() {
	(function(){gallery()},1000);
}

function gallery() {
	switch(i)
{
case 1:
		document.getElementById("panel").src="images/bcf.jpg";
  break;
case 2:
		document.getElementById("panel").src="images/bcb.jpg";
  break;
default:
		document.getElementById("panel").src="images/bcf.jpg";
}
}

function prev() {
	var i = -1;
	return true
}

function next() {
	var i = +1;
	return true
}

Ken g6 · Jun 9, 2012

infamoustrey said:
Hey I tried what you said

Well, you say you did, but I don't see an awful lot of evidence that you did. You did clean up the ";"s, which is good. But I also said:

Ken g6 said:
I suggest you step back and write, in plain English, what it is you want each function to do. This is best written in comments (// or /*...*/) before the start of each function.

You may have done this, but if you did you didn't leave the comments in the code. If you had I would be able to see more clearly what you were thinking.

Ken g6 said:
Then, with that in mind, go back through and try to make each function do what you wrote you wanted it to do.

Apparently, you did this. You may have made some progress here, but your new code has new syntax problems. And other problems remain in other areas of the code.

Finally, I said:

Ken g6 said:
This looks like homework to me. If so, you should clearly state so in your post.

So let me ask you directly: Is this homework?

infamoustrey · Jun 9, 2012

I apologize, no this is not homework. This is just me testing some simple code in stead of the more complex image gallery, which I may or may not use on a website I am designing for a client. I will paste some comments and the code to clear some of it up. If you could please point out the syntax in the code below.

This should be better, let me know about the problems. Thank you!

Code:

onload="galleryChecker();"
//functions for image 1
function getBigger1() {
// changes the image to a thumbnail, which acts as a rollover image
	document.getElementById("img1").width="155";
	document.getElementById("img1").height="100";
}
function getSmaller1() {
// reverts the image back to its original state
	document.getElementById("img1").width="103";
	document.getElementById("img1").height="60";
}
function display1() {
// changes the panel image to the selected thumbnail
	document.getElementById("panel").src="images/bcf.jpg";
}

//functions for image 2
function getBigger2() {
// changes the image to a thumbnail, which acts as a rollover image
	document.getElementById("img2").width="155";
	document.getElementById("img2").height="100";
}
function getSmaller2() {
// reverts the image back to its original state
	document.getElementById("img2").width="103";
	document.getElementById("img2").height="60";
}
function display2() {
// changes the panel image to the selected thumbnail
	document.getElementById("panel").src="images/bcb.jpg";
}
//variables for the gallery
var i = 1;

function galleryChecker() {
// checks if the i varible has changed
	(function(){gallery()},1000);
}

function gallery() {
//changes the images as the i varible changes
	switch(i)	{
case 1:
//assign each image its own number in the varible i, and change the src accordingly
		document.getElementById("panel").src="images/bcf.jpg";
  break;
case 2:
		document.getElementById("panel").src="images/bcb.jpg";
  break;
default:
// makes sure the image does not go past the loaded number varibles
		i = 1
		document.getElementById("panel").src="images/bcf.jpg";
				}
}

function prev() {
//sends the image to the previous one
	var i = -1;
	return true
}

function next() {
//loads the next image
	var i = +1;
	return true
}

Ken g6 · Jun 9, 2012

Oh! Well, if it's not homework, I'll be less oblique. prev() and next() should call gallery() directly before return-ing. Forget galleryChecker. What you want in prev() and next() is to increment (i++) or decrement (i--) i. No "var"s, no single = signs - at least initially. You do want boundary checking and wrapping.

Code:

// gallery_length should be the number of pictures in the gallery.  Here, 2.
var gallery_length = 2;

function prev() {
//sends the image to the previous one
	i--;
	if(i < 0) i = gallery_length-1;
	gallery();
	return true
}

function next() {
//loads the next image
	i++;
	if(i >= gallery_length) i=0;
	gallery();
	return true;
}

If I was designing this from scratch, I would make an image gallery object. But that might be over your head at this point.

infamoustrey · Jun 10, 2012

Fixed it!, Thank you so much!

At first it didn't work and as I was about to lose faith. You will never guess what the problem was......

----->;<--------

cytg111 · Jun 11, 2012

i hate js

Search

Beginner JavaScript Problem

infamoustrey

Junior Member

Ken g6

Programming Moderator, Elite Member

infamoustrey

Junior Member

Ken g6

Programming Moderator, Elite Member

infamoustrey

Junior Member

Ken g6

Programming Moderator, Elite Member

infamoustrey

Junior Member

cytg111

Lifer

TRENDING THREADS