Howdy_McGee Posted July 29, 2010 Share Posted July 29, 2010 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 More sharing options...
ShadowMage Posted July 29, 2010 Share Posted July 29, 2010 Maybe it's just me, but I think you need to be a little clearer with your explanation. I'm not quite sure what it is you're trying to do. Link to comment Share on other sites More sharing options...
thescientist Posted July 29, 2010 Share Posted July 29, 2010 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 More sharing options...
music_lp90 Posted July 29, 2010 Share Posted July 29, 2010 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 More sharing options...
Howdy_McGee Posted July 29, 2010 Author Share Posted July 29, 2010 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 More sharing options...
ShadowMage Posted July 30, 2010 Share Posted July 30, 2010 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 onThe 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 More sharing options...
ApocalypeX Posted July 30, 2010 Share Posted July 30, 2010 <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 More sharing options...
Howdy_McGee Posted August 2, 2010 Author Share Posted August 2, 2010 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 More sharing options...
thescientist Posted August 2, 2010 Share Posted August 2, 2010 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 More sharing options...
ShadowMage Posted August 2, 2010 Share Posted August 2, 2010 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 More sharing options...
thescientist Posted August 2, 2010 Share Posted August 2, 2010 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 More sharing options...
Howdy_McGee Posted August 2, 2010 Author Share Posted August 2, 2010 Thank works - thanks. Though I have a question - why was it in the script i made in my last post I would have to click the link twice in order to make it move forward and backward? Link to comment Share on other sites More sharing options...
thescientist Posted August 2, 2010 Share Posted August 2, 2010 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 More sharing options...
ShadowMage Posted August 2, 2010 Share Posted August 2, 2010 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 More sharing options...
thescientist Posted August 2, 2010 Share Posted August 2, 2010 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 More sharing options...
Howdy_McGee Posted August 2, 2010 Author Share Posted August 2, 2010 :S I'm a chrome user (Inspect Element) but i'll check out the firebug in mozilla. Thanks guys! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.