<p>Let's say we have defined a CSS class that is being applied to various elements on a page.</p>

<pre><code>colourful
{
    color: #DD00DD;
    background-color: #330033;
}
</code></pre>

<p>People have complained about the colour, that they don't like pink/purple. So you want to give them the ability to change the style as they wish, and they can pick their favourite colours. You have a little colour-picker widget that invokes a Javascript function:</p>

<pre><code>function changeColourful(colorRGB, backgroundColorRGB)
{
    // answer goes here
}
</code></pre>

<p>What goes in the body of that function?</p>

<p>The intent being that when the user picks a new colour on the colour-picker all the elements with <code>class="colourful"</code> will have their style changed.</p>

Something like
```
```
function changeColourful(colorRGB, backgroundColorRGB)
 {changeColor (document, colorRGB, backgroundColorRGB)}

function changeColor (node, color, changeToColor)
{
   for(var ii = 0 ; ii < node.childNodes.length; ii++)
   {
     if(node.childNodes[ii].childNodes.length > 0)
     {
        changeColor(node.childNodes[ii], color, changeToColor);
     }

      if(node[ii].style.backgroundColor == color)
      {
        node[ii].style.backgroundColor = changeToColor;
      }

   }

}
```
```