Jump to content

Changing Backgrounds


BobbyFrankyJim

Recommended Posts

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

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

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

<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

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

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

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

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

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

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

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

<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

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

Archived

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

×
×
  • Create New...