BobbyFrankyJim Posted August 15, 2010 Share Posted August 15, 2010 Hello Everyone,I am trying to make it so you can change the background by clicking the forwards or backwards buttons through varibles but it will not work (I have only programmed 1 background because it wasn't working) <script type="text/javascript">function my_function_1(){then x--1;}</script><script type="text/javascript">function my_function_2(){then x++1;}</script></head><body><script type="text/javascript">x=0;</script><input type="button" onclick="my_function_1();"value="<<" /><input type="button" onclick="my_function_2();"value=">>" /><script type="text/javascript">if (x===0){then document.body.style.backgroundColor="white";}</script><script type="text/javascript">if (x===1){then document.body.style.backgroundColor="lavender";}</script> Any help would be much appreciatedEDIT I have changed some mistakes in my scripts but it is still not working Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2010 Share Posted August 15, 2010 first of so manychangethen (x-1); to x--;then (x+1); to x++; Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 15, 2010 Author Share Posted August 15, 2010 That is what I had originally but a validator didn't like it Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 15, 2010 Author Share Posted August 15, 2010 should I replace the change background color from the if statements and make it go through a function instead? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2010 Share Posted August 15, 2010 what html validator? it would it treats javascript as html code if commenting out is not included<script type="text/javascript"><!--////--></script>after x value change you have to run another function within it to change background using below, but you going to limit x value to 0 and max value.if (x===0){document.body.style.backgroundColor="white";}if (x===1){document.body.style.backgroundColor="lavender";} Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 15, 2010 Author Share Posted August 15, 2010 You mean by having only 1 background? If so I am going to add more once it works.What do you suggest I do? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2010 Share Posted August 15, 2010 maybe a javascript array of valid coloursbgcolours('white','lavendar','#ff0000','#00ff00','#0000ff')limit x to 0 and bgcolours.lengthif(x>=0 && x<bgcolours.length){increase or decrease x value}then use x value to select colour from arraydocument.body.style.backgroundColor=bgcolours[x]; Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 15, 2010 Author Share Posted August 15, 2010 Ok that could work, but I do not exactly how to do all that could you make a sample script? Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 15, 2010 Author Share Posted August 15, 2010 <script type="text/javascript">var bgcolors = new Array();BG0[0] = "white"; BG1[1] = "purple";BG2[2] = "green";Don't really know the next bitif(x>=0 && <---x<bgcolours.length)--->{increase or decrease x value}document.body.style.backgroundColor=bgcolours[x];<----Don't get that bit really, I'm not great with Arrays---> Link to comment Share on other sites More sharing options...
Ingolme Posted August 15, 2010 Share Posted August 15, 2010 I recommend that you try to learn Javascript and not expect people to do this for you. Look through the W3Schools Javascript Tutorial until you're able to understand it all. Everything you need to know is there. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2010 Share Posted August 15, 2010 BG0[0] = "white"; BG1[1] = "purple";BG2[2] = "green";should bebgcolours[0] = "white";bgcolours[1] = "purple";bgcolours[2] = "green";which is the same as using below to store value in one govar bgcolours = new Array('white','purple','green');arrays count start from 0, so bgcolours[0] will reference the colour white.bgcolours.length will the total of items stored in array which is 3if(x>=0 && x<bgcolours.length) will allow x value greater and equal to 0, but less than 3, why? less than 3, because the highest array reference value equals 2 (starts from 0 remember) Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 15, 2010 Author Share Posted August 15, 2010 I gtg now could you PLEASE make a sample script for me? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2010 Share Posted August 15, 2010 well I've got to go now as well, but no worries! as i have practically already given you all the script, you just need to put it together. Link to comment Share on other sites More sharing options...
thescientist Posted August 15, 2010 Share Posted August 15, 2010 why are there so many script tags? I imagine all you would need is one function, one global variable, and two HTML elements to act as the forward and back buttons with onclick handlers attached? You could use the global variable to load background images based on defined naming convention, or as dsonesuk shows, you can use it to increment or decrement the index for an array of backgrounds (images or colors).but yes, Ingolme's advice would be advisable so that you can understand the help that people are giving you, and so that you can practice this on your own. Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 16, 2010 Author Share Posted August 16, 2010 I think I found another way but a need a script for a button to disable so it cannot be pressed e.gif x=0{disable button "blah"} Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 16, 2010 Author Share Posted August 16, 2010 Ahh the script's not working anyway, I cannot see much wrong with this at all: <html><head><title>Change Background</title><script type="text/javascript">function x+1(){x++1;}function x-1(){x--1;}x=0;</head><body><script type="text/javascript">if (x===0 && x>=0) { then document.body.bgColor="white"; }else if (x===1 && x>=0) { then document.body.bgColor="purple" }else { then document.body.bgColor="green" }</script><input type="button" onclick="x-1()" value="-->" /><input type="button" onclick="x+1()" value="<--" /></body></html> I used the If... Else if... Else function of javascript which will work with 3 colors if I can disable the button and everything works Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2010 Share Posted August 16, 2010 1) To disable your button you will have to give them an unique id to reference them by.2) you will then have identify the minimum and maximum value to work with, as you want to disable prev button on first colour, but enable on remaining colours, and on the next button disable on last record, but enable on previous.<input type="button" id="prev" value="<<" /><input type="button" id="next" value=">>" />EDIT: oops fogot impotant bitsprevref=document.getElementById("prev");nextref=document.getElementById("next");if(x>0) { prevref.disabled=false; }else { prevref.disabled=true; }if(x>=2) { nextref.disabled=true; }else { nextref.disabled=false; } Link to comment Share on other sites More sharing options...
ShadowMage Posted August 16, 2010 Share Posted August 16, 2010 Ahh the script's not working anyway, I cannot see much wrong with this at all:Well for starters, this:function x+1()is not valid. You cannot use operators in a function name.And this isn't valid either:x++1;It should be just:x++;Also, there is no then when you're using if statements. It should be:if (x===0 && x>=0){document.body.bgColor="white";}I really recommend heading over to the JavaScript tutorial and doing some reading up on JavaScript syntax.Oh, and you should really encode any '<' symbols in your HTML attribute values. Like this:<input type="button" onclick="x+1()" value="<--" /> Link to comment Share on other sites More sharing options...
thescientist Posted August 16, 2010 Share Posted August 16, 2010 Ahh the script's not working anyway, I cannot see much wrong with this at all:If you don't know the basics, I could see why. Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 17, 2010 Author Share Posted August 17, 2010 I have read through the javascript tutorials alot but they do not cover everythinga) It didn't say you can't use operators that I sawB) It did not have an example of incremation in the tutorialc) I checked it against a validator that must have been dodgyd) I know I should but it still worksAnd thanks for the help Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 17, 2010 Author Share Posted August 17, 2010 After the changes it still will not work Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 17, 2010 Author Share Posted August 17, 2010 With some edits it sort of works, the background starts as green instead of white and the buttons do nothing.EDIT: Sorry it was a javascript error, still not working Link to comment Share on other sites More sharing options...
ShadowMage Posted August 17, 2010 Share Posted August 17, 2010 Show us your current code. Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted August 18, 2010 Author Share Posted August 18, 2010 <html><head><title>Change Background</title><script type="text/javascript">function a(){x++;}function b(){x--;}var x=0;</script></head><body><script type="text/javascript">if (x==0){document.body.bgColor="white";}else if (x==1){document.body.bgColor="purple";}else{document.body.bgColor="green";}if(x>0){prevref.disabled=false;}else{prevref.disabled=true;}if(x>=2){nextref.disabled=true;}else{nextref.disabled=false;} </script><input type="button" id="next" onclick="b()" value="<--" /><input type="button" id="prev" onclick="a()" value="-->" /></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted August 18, 2010 Share Posted August 18, 2010 Your script is updating x when a button is pressed, but it's not updating the background color, just x.The background switches to green once when the page loads because that's what you told it to do in the script that's in the body. It does that as soon as the parser runs through the script.nextref and prevref don't seem to be defined anywhere. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.