I'm trying to change the colour of text. To do this I change the `id` on the `div` tag ,using JavaScrip,t so different CSS rules apply.

**home.html**

```
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style-original.css" />
        <meta charset="utf-8" />
        <title>test</title>
        <script type="text/javascript">
        <!--
            function change()
            {
                document.getElementById("part1").className = "part2"
            }
        //-->
        </script>
    </head>
    <body>
        Hello.<br />
        <div id="part1">Test test.</div><br />
        <input type='button' onclick='change()' value='Form Checker' />
    </body>
</html>

```

**style-original.css**

```
#part1
{
    color: #FF0000;
}

#part2
{
    color: #7D26CD;
}

```

The colour doesn't change when the button is clicked. What is the problem? Problem is is was changing `className` where as I should be changing the `id`. This was a big fat "[doh](http://commuteorlando.com/wordpress/wp-content/uploads/2008/12/image.gif)" moment.