I want to simplify my Change Color function - help?

[Chezshire]

Hello to one an all,

  I've managed to write my first actual function and it works so I'm very happy about this. But I would like to simplify it, right now i'm doing everything by using four functions, one function per possible color change (function calls a css style sheet to change things), but I'd like to simply the writing of the function so that instead of having function1, function2, function3 and function4, each calling a specific stylesheet, I could have one function that calls the appropriate stylesheet depending on the id of the link clicked.

 

The class project is that clicking on a button or a link changes the text related to that button (actor's name == actor's speech). All this must be done without 'reloading' the page. I've got it all working - now i'd like to simplify it. Help? Please help the poor starving college student

 

Thanks in advance

-Chez

 

My javaScript:

<script type="text/javascript">

function changeStyleToLaertes() {
document.getElementById('stylesheet0').href = '_css/styles_a4laertes.css';
}
function changeStyleToOpehlia() {
document.getElementById('stylesheet0').href = '_css/styles_a4ophelia.css';
}
function changeStyleToPonolious() {
document.getElementById('stylesheet0').href = '_css/styles_a4polonious.css';
}
function changeStyleToReset() {
document.getElementById('stylesheet0').href = '_css/styles_a4base.css';
}
</script>

 

Snippet of my html (should be enough for you to see what I'm doing)

<script type="text/javascript">

function changeStyleToLaertes() {
document.getElementById('stylesheet0').href = '_css/styles_a4laertes.css';
}
function changeStyleToOpehlia() {
document.getElementById('stylesheet0').href = '_css/styles_a4ophelia.css';
}
function changeStyleToPonolious() {
document.getElementById('stylesheet0').href = '_css/styles_a4polonious.css';
}
function changeStyleToReset() {
document.getElementById('stylesheet0').href = '_css/styles_a4base.css';
}
</script>

 

URL to full example: http://www.xdesignworks.com/SCC/web150/wk05a_fin.shtml

[tomfmason]

how about this:

 

function ChangeStyle(style){
      document.getElementById('stylesheet0').href = '_css/styles_a4'+style+'.css';
}

 

usage

<a href="#" onlick="changeStyle('laertes')">Change style to Laertes</a>
<a href="#" onlick="changeStyle('ophelia')">Change style to Ophelia</a>
<a href="#" onlick="changeStyle('polonious')">Change style to polonious</a>
<a href="#" onlick="changeStyle('base')">Change style to default</a>

[Chezshire]

Thank you TomfMason,

  I tried your solution, but unfortunately I don't think that I understood how to implement it correctly as I ended up with the following error 'JavaScript Error: changeStyle is not defined In file'. I think that that means i need to set some variables for the 'changeStyle' function, but i'm not sure how to - I tried setting one but the way i tried didn't work. Below is the code as it now appears -- any suggest? I love how simple this is, but i'm having a problem implementing it correctly -- as always help is much appreciated

 

hugh thanks for the help thus far!

-Chez

 

javascript in the header:

var laertes = 'laertes';

function ChangeStyle(style){
      document.getElementById('stylesheet0').href = '_css/styles_a4'+style+'.css';
}
[code]

Javascript wired links:

<p>

<a class="laertesLink"  href="#" onclick="changeStyle('laertes')">LAERTES</a>     

<a class="opheliaLink"  href="#" onclick="changeStyle('ophelia')">OPHELIA</a>    

<a class="poloniusLink"  href="#" onclick="changeStyle('polonious')">LORD POLONIOUS</a>    

<a class="resetLink"    href="#" onclick="changeStyle('base')">RESET</a>

<p/>

[/code]

[n000bie]

JavaScript is case sensitive so changeStyle and ChangeStyle is different.

[Chezshire]

Thank you n000bie and tomfmason for all the help,

 

  I should have caught that, but obviously I wasn't looking in the right place for the error. When I saw the error I immediately thought that I needed to define some variables for the function, vs. looking for a typo. I was pretty amazed at what the first script that I was able to write was capable of doing with a few lines of script, and this is so much more amazing to me as it does the same with less then one third the lines of script. Thank you both very much for the assistance. You're both very kind and I hope one day that I'll be able to work at your level so that I can help 'pay it forward' by helping others here just as you've helped me.

 

Thank you very much, your both very awesome people

-Chez