Jump to content

OnClick move through array


Howdy_McGee

Recommended Posts

I'm trying to make a javascript array, and then when you click on a link I want it to write the String in the [0] position of the array - when you click it again I want it to replace what it just wrote with position [1] in the array and so on. I think i'm close but it's still not quite working. Actually it's not working at all. Any suggestions?

<html><head><script type="text/javascript">var month = new Array();month[0] = "April";month[1] = "May";month[2] = "June";month[3] = "July";month[4] = "August";month[5] = "September";function test(){	for(var i = 0; i < arr.length; i++)	{		document.write(month[i]);		i++;	}}</script></head><body><a a href="#" onclick="test()">click me<br />	</a><body><html>

Link to comment
Share on other sites

same here. i get that you're trying to increment through an array, but as what the outcome/output should be, I'm in ShadowMage's shoes.

Link to comment
Share on other sites

Something like this?

<html><head><script type="text/javascript">var month = new Array();var i = 0;month[0] = "April";month[1] = "May";month[2] = "June";month[3] = "July";month[4] = "August";month[5] = "September";function test(){	document.getElementById("month").innerHTML = month[i];	i++;}</script></head><body><a a href="#" onclick="test()">click me<br />    </a><div id="month"></div></body></html>

You can improve it so it will loop back to the first month when you reach the end, but here's a start. I think it's what you want. The basic things I changed were using innerHTML to write the result into the div that I added in your html. The test function, I just changed to write the result into the div and then increment the count for the next click.

Link to comment
Share on other sites

Yeah, I want to click on the link and have it loop through the array - showing the contents of the array in the html document. I don't want it to keep stacking the string on top of one another though Ex.If I click said link I want APRIL to show upthen when i click the link again I want APRIL to disappear and MAY to show up in the same place. so on and so on

Link to comment
Share on other sites

If I click said link I want APRIL to show upthen when i click the link again I want APRIL to disappear and MAY to show up in the same place. so on and so on
The script that music_lp90 posted will do just that. Notice the <div id='month'> placed in the HTML. That's where the month names will show up. In the javascript the test function uses a global index variable to get the value from your array and place it in the innerHTML of that div, and then increments the index.As music_lp90 hinted at you could modify the function so that it will loop back to the first index of the array. To do that you just have to add a conditional to check if the variable 'i' is greater than the length of the array and if it is, set it back to 0.
Link to comment
Share on other sites

<html><head><script type="text/javascript">var month = new Array();month[0] = "April";month[1] = "May";month[2] = "June";month[3] = "July";month[4] = "August";month[5] = "September";var count = 0;var max = month.length;function test(){	if(count < max){		document.getElementsByTagName('p')[0].innerHTML += month[count] + "<br />";		window.count++;	}}</script></head><body><a a href="#" onclick="test()">click me</a><p>Months: <br /> </p><body><html>

Link to comment
Share on other sites

I tried music_lp90 script but it wasn't showing the contents of the array on click - the first time I tried it.Went back and tried it again and it worked fine. I think I was over complicating it the first time I tried creating it. Thanks!Ok, here's what I got so far but I ran into another problem:

<html><head><script type="text/javascript">var month = new Array();var i = 0;month[0] = "April";month[1] = "May";month[2] = "June";month[3] = "July";month[4] = "August";month[5] = "September";function forward(){	document.getElementById("month").innerHTML = month[i];	i++;				if (i==6)	{		i=0;	}}function backward(){	--i;	document.getElementById("month").innerHTML = month[i];		if (i==0)	{		i=6;	}}</script><style type="text/css">#month{	color: blue;	font-size: 22px;}</style></head><body><a a href="#" onclick="forward()">Forward<br /><a a href="#" onclick="backward()">Backward<br /><br /><br />	</a><div id="month"></div></body></html>

When I move forward and then back then forward again, I have to click the forward link twice for it to take effect, same thing with the back button. I want it to be a smooth transition between the two and I don't understand why it isn't - any tips?

Link to comment
Share on other sites

first of all you're backwards function should be checking for less than 0, not 0, or else you'll never show anyone the first index in the array. It would probably be a better idea to display the text after you have incremented/decremented and then checked the value of i. Also I cleaned up your hyperlinks, you had two a's in there and you weren't closing them.something like this seems to working ok

<html><head><script type="text/javascript">var month = new Array();var i = 0;month[0] = "April";month[1] = "May";month[2] = "June";month[3] = "July";month[4] = "August";month[5] = "September";function forward(){  i++;		   if(i>5){	i=0;  };  document.getElementById("month").innerHTML = month[i];};function backward(){  --i;  if (i<0){	i=5;  };  document.getElementById("month").innerHTML = month[i];};</script><style type="text/css">#month{  margin-top: 20px;  color: blue;  font-size: 22px;};</style></head><body><a href="#" onclick="forward()">Forward<br /></a><a href="#" onclick="backward()">Backward<br /></a><div id="month">April</div></body></html>

you should consider debugging and "tracking" your code as you develop, so you can follow scripts as they run. For instance, in this case, I would suggest putting alert statement at the beginning and ends of your functions, to see what i is and the value of the array at that index; to see if its doing what you think its doing.

Link to comment
Share on other sites

you should consider debugging and "tracking" your code as you develop, so you can follow scripts as they run. For instance, in this case, I would suggest putting alert statement at the beginning and ends of your functions, to see what i is and the value of the array at that index; to see if its doing what you think its doing.
Or better yet, use a debugger like Firebug.
Link to comment
Share on other sites

Or better yet, use a debugger like Firebug.
true, but when running his code I didn't see any obvious errors in the console. But best practice is to use both. A little of column A, a little of column B.
Link to comment
Share on other sites

it's probably because you weren't checking your index before outputting the corresponding value in the array, plus one of the calculations you had was going to cause an error at some point. Try adding an alert statement to the beginning and end of each of your functions (from your old code) showing what i is and see what happens each time you click forward and backward.

Link to comment
Share on other sites

true, but when running his code I didn't see any obvious errors in the console. But best practice is to use both. A little of column A, a little of column B.
In the console, maybe not, but you can place breakpoints and use the step into button to step through the code one line at a time and check the values of your variables without using alerts.But yes, probably wise to use a little bit of both when debugging code. :)
Link to comment
Share on other sites

In the console, maybe not, but you can place breakpoints and use the step into button to step through the code one line at a time and check the values of your variables without using alerts.But yes, probably wise to use a little bit of both when debugging code. :)
oh yeah. one of my coworkers was showing us that during a javascript meeting we were all having together. that and the profile tab where some of the nice firebug gems we went over.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...