Question

I have a function called bodyStyle() which accepts 5 values:

bodyStyle(textCol, backCol, heading1Col, headingsCol, linkCol)

These parameters accept 5 different colours and apply them to the page.

Currently I am using images, as shown:

<a href="javascript:void(0);" onclick="bodyStyle('#444','white','#0424B5','#0424B5','#99975A');">
<img src="images/accessibility/bgcolour1.gif" alt="Black Text, White Background" /></a>

I am trying to move this to a combo box, and currently have the following:

<select name="colours" onchange="bodyStyle(accessibility.colours.value, accessibility.colours.value, accessibility.colours.value, accessibility.colours.value, accessibility.colours.value);">
   <option value='-1'>Select</option>
   <option value='#444','white','#0424B5','#0424B5','#99975A'>Black on White</option>
   <option value='black','yellow','black','black','black'>Black on Yellow</option>
   <option value='black','#87CEFA', 'black','black','black'>Black on Blue</option>
</select>

I know this is wrong but I really have no idea, I need to accept the 5 values into bodyStyle()’s parameters.

Thanks in advance for your help!

Answer 1

Get rid of the quotes and write it down like a single string

<select name="colours" onchange="changeColour()">
   <option value='-1'>Select</option>
   <option value='#444,white,#0424B5,#0424B5,#99975A'>Black on White</option>
   <option value='black,yellow,black,black,black'>Black on Yellow</option>
   <option value='black,#87CEFA, black,black,black>Black on Blue</option>
</select>

Then you do:

function changeColour(){
    var values = document.getElementsByName("colours")[0].value.split(',');
    bodyStyle(values[0], values[1], values[2], values[3], values[4]);
}

Something like that