Jump to content

Changing Backgrounds


BobbyFrankyJim

Recommended Posts

rename function a() and function b() to something relevant to its operationfunction next(){x++;}function prev(){x--;}place remaining if else code in another functionfunction changecolour(){prevref=document.getElementById("prev");nextref=document.getElementById("next");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;} }then call function change colour() from within next() and prev()function next(){x++;changecolour()}function prev(){x--;changecolour()}remember to change inputs to new names<input type="button" id="next" onclick="next()" value="<--" /><input type="button" id="prev" onclick="prev()" value="-->" />

Link to comment
Share on other sites

That's because the script runs before the element you're refering to is created.The script runs as soon as it loads. All the HTML elements that load after it don't exist yet.

Link to comment
Share on other sites

I have made the suggested changes, still not working
really does not give us much information why it is not working, I suggest you start giving us more details other than 'ITS STILL NOT WORKING' or you find yourself talking to yourselfright!your input values are wrong for a start, you have previous for next, and visa versa.add window.onload=changecolour; within <script type="text/javascript">window.onload=changecolour;</script>and don't come back with "it still does not work" without elaborating what error messages you are getting, or what is happening, or showing us the code.
Link to comment
Share on other sites

Well, then how do you figure out why it's not working? Obviously error messages are a good start, if you're getting any errors they should point out part of the problem. If you're not getting any error messages, but it doesn't look like it's working, then add debugging statements to figure out what the code is doing. If you're using Firebug, you can use console.info and console.log to send data to the Firebug console, or you can just use alert also. Put debugging statements to tell you when functions run, what values variables have, etc, so that you can step through the code and figure out why it's doing what it is, or why it's not doing what you think it should. This is how most programmers solve Javascript problems.

Link to comment
Share on other sites

well mine works! and I've even added changes of font colour from black to white depending on background colour, all from the original script plus the changes i suggested.see how non helpful this is.no error messages, well because there aren't any but there would be if there was.no description of problem, again there would be, if anyMain helpful option, showing of code, nadda.

Link to comment
Share on other sites

  • 5 weeks later...

If anyone's interested I stumbled upon a script (with massive modification) that works:

<html><head><script type="text/javascript">var b=0;function bg(){if (b==0)  {  document.body.style.background="#FFFFFF";  }else if (b==1)  {  document.body.style.background="#FF0000";  }else if (b==2)  {  document.body.style.background="#0000FF";  }else if (b==3)  {  document.body.style.background="#008000";  }}function b1(){if (b>0)  {  b--;  bg()  }}function b2(){if (b<3)  {  b++;  bg()  }}</script></head><body><input type="button" onclick="b1()" id="myButton1" value="<<"><input type="button" onclick="b2()" id="myButton2" value=">>"></body></html>

Link to comment
Share on other sites

hmm. I would probably clean it up. you only really need one function (or you could make an extra function just to validate the index, and probably best to use document.getElementById() as opposed to dot style notation. Below allows you add more and more colors without having to modify the code in order to compensate for the growth in the array. It also wraps the colors if it goes out of bounds, just as a feature.

<html><head><script type="text/javascript">var index=0;var colors=["#FFFFFF","#FF0000","#0000FF","#008000"];function change_bg(elem){  (elem.id==="next") ? index +=1 : index -=1;  index = validate_index(index);  document.getElementById("my_body").style.background = colors[index];};//will wrap the index if it goes out of boundfunction validate_index(num){  var end = (color.length - 1);  if(num < 0){	num = end;  }else if(num > end){	num = 0;  };  return num;};</script></head><body id="my_body"><input type="button" onclick="change_bg(this)" id="previous" value=""><input type="button" onclick="change_bg(this)" id="next" value=""></body></html>

Link to comment
Share on other sites

with button disable/enable and font colour change

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var bgcolours = new Array('white','lavender','#ff0000','#00ff00','#0000ff');var fontcolours = new Array('#000','#000','#fff','#000','#fff');var x=0;window.onload=function(){prevref=document.getElementById("prev");nextref=document.getElementById("next");prevref.onclick=function(){keeptrack(this)};nextref.onclick=function(){keeptrack(this)};document.body.style.backgroundColor=bgcolours[x];document.body.style.color=fontcolours[x];prevref.disabled=true;}function keeptrack(element)	{		(element.id=="next") ? x++ : x--;				changebg();	}function changebg(){(x>0) ? prevref.disabled=false : prevref.disabled=true;	(x>=(bgcolours.length-1)) ? nextref.disabled=true :	nextref.disabled=false;document.body.style.backgroundColor=bgcolours[x];document.body.style.color=fontcolours[x];}/*--*//*]]>*/</script><style type="text/css"></style></head><body><input type="button" id="prev" value="<<" /><input type="button" id="next" value=">>" /><p>Duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Ullamco laboris nisi cupidatat non proident, velit esse cillum dolore.</p><p>Sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Qui officia deserunt ut aliquip ex ea commodo consequat. Sunt in culpa consectetur adipisicing elit, lorem ipsum dolor sit amet. Eu fugiat nulla pariatur.</p><p>Qui officia deserunt sed do eiusmod tempor incididunt in reprehenderit in voluptate. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor sunt in culpa in reprehenderit in voluptate. Velit esse cillum dolore quis nostrud exercitation eu fugiat nulla pariatur.</p></body></html>

Link to comment
Share on other sites

using document.body. is perfectly valid for using instead of getElementByID, as there is only one body tag, it is unique antway.
good point
Link to comment
Share on other sites

with button disable/enable and font colour change
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var bgcolours = new Array('white','lavender','#ff0000','#00ff00','#0000ff');var fontcolours = new Array('#000','#000','#fff','#000','#fff');var x=0;window.onload=function(){prevref=document.getElementById("prev");nextref=document.getElementById("next");prevref.onclick=function(){keeptrack(this)};nextref.onclick=function(){keeptrack(this)};document.body.style.backgroundColor=bgcolours[x];document.body.style.color=fontcolours[x];prevref.disabled=true;}function keeptrack(element)	{		(element.id=="next") ? x++ : x--;				changebg();	}function changebg(){(x>0) ? prevref.disabled=false : prevref.disabled=true;	(x>=(bgcolours.length-1)) ? nextref.disabled=true :	nextref.disabled=false;document.body.style.backgroundColor=bgcolours[x];document.body.style.color=fontcolours[x];}/*--*//*]]>*/</script><style type="text/css"></style></head><body><input type="button" id="prev" value="<<" /><input type="button" id="next" value=">>" /><p>Duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Ullamco laboris nisi cupidatat non proident, velit esse cillum dolore.</p><p>Sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Qui officia deserunt ut aliquip ex ea commodo consequat. Sunt in culpa consectetur adipisicing elit, lorem ipsum dolor sit amet. Eu fugiat nulla pariatur.</p><p>Qui officia deserunt sed do eiusmod tempor incididunt in reprehenderit in voluptate. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor sunt in culpa in reprehenderit in voluptate. Velit esse cillum dolore quis nostrud exercitation eu fugiat nulla pariatur.</p></body></html>

transitional, huh? :)
Link to comment
Share on other sites

No! it can be semantic, its when you use presentational elements and attributes, that it becomes non semantic. with transitional i can use iframes that can link to other domains content, can't do that in strict, not even if you use the object element, if i want to use target="_blank" to open another window, easy in transition just add it to the element that requires it, DONE!, with strict you have to use javascript to HACK it, and write target attribute within the link, so it validates, to me that is absolutely madness.

Link to comment
Share on other sites

No! it can be semantic, its when you use presentational elements and attributes, that it becomes non semantic. with transitional i can use iframes that can link to other domains content, can't do that in strict, not even if you use the object element, if i want to use target="_blank" to open another window, easy in transition just add it to the element that requires it, DONE!, with strict you have to use javascript to HACK it, and write target attribute within the link, so it validates, to me that is absolutely madness.
I've got to somewhat agree with dsonesuk on this one. (Though I do use Strict for all my pages)The argument for target is valid and I understand why it was deprecated in Strict. The option to open a new window should remain in control of the user.However, could someone explain the reason that iframes are not allowed. That one I'm confused on. I can certainly see applications where they would be useful.
Link to comment
Share on other sites

Archived

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

×
×
  • Create New...