Switching backgrounds, while switching text

I was able to make the text loop infinitely and the body color change once:

<?php?>
<style type="text/css">
<!--
header{background-color:orange;}
#color1{background-color:red;}
#color2{background-color:green;}
#color3{background-color:blue;}
-->
</style>

<script type="text/javascript">
<!--
var flip = (function() {
    var flip = ['_addText1','_addText2','_addText3'];
    var count = -1;
    return function() {
        return flip[++count % flip.length];
    }
}());
-->
</script>


<body id="color1">

<header onclick="document.getElementById('click').innerHTML = flip(); document.getElementById('color1').setAttribute('id', 'color2');">
    <h1>StaticText<a id="click">_ThisWillChange</a></h1>
    <p>Click anywhere in the header to change the text above.<br />
       This will also change the body color.</p>
</header>

</body>
<?php?>

The first problem is; if I add more color changes to the 'onclick' attribute it stops working all together. Basically I want the color to loop with the text:

document.getElementById('color2').setAttribute('id', 'color3');
document.getElementById('color3').setAttribute('id', 'color1');

The second problem is that I'm not really 'fluent' in javascript. I'm actually lucky I figured out this much to be honest.

I'm sure there's a way to put it all into the javascript (to keep my HTML clean), but I don't know how.

Any help would be most appreciated! Thanks in advance...

Why do you want to change the id of the element if you are so keen to set the color.

You can just the class on the body element which should get the work done for you.

Secondly it's a bad practice to bind events inline. Use javascript to bind the events as well.

<body id="color1" class="color1">

This is one way of writing the code.

Code

var header = document.getElementsByTagName('header')[0];

header.addEventListener('click', function () {
    var body = document.getElementById('color1');
    document.getElementById('click').innerHTML = flip("text");
    body.className = flip("color");
});


var flip = (function () {
    var flip = ['_addText1', '_addText2', '_addText3'],
        colors = ["color1", "color2", "color3"];
    var count = -1,
        colorCount = -1;
    return function (arg) {
        if(arg === 'text')
            return flip[++count % flip.length];
        if(arg === 'color')
            return colors[++colorCount % colors.length];
    }
})();

HTML

<body id="color1" class="color0">
    <header>
         <h1>StaticText<a id="click">_ThisWillChange</a></h1>

        <p>Click anywhere in the header to change the text above.
            <br />This will also change the body color.</p>
    </header>
</body>

CSS

header {
    background-color:orange;
}
.color0 {
    background-color:yellow;
}
.color1 {
    background-color:red;
}
.color2 {
    background-color:green;
}
.color3 {
    background-color:blue;
}

Check Fiddle