how to make one button change two stylesheet's

hello people of stackoverflow forum.

so on my website I have added the option to change the color on the layout, and I would like to change the header to but i don't know how. the code I am using is in javascript and I am using buttons to change between stylesheets. now my question is how do i go about to make one button changing two stylsheets in one click. the header stylesheet is rather big and i would like it to be separated from the other styling.

where i got the code:

-LINK-

javascript:

<script type="text/javascript">
function swapStyleSheet(sheet){
     document.getElementById('pagestyle').setAttribute('href',sheet);
}
</script>

HTML:

Head:

<link id="pagestyle" rel="stylesheet" type="text/css" href="css/index/index_purple.css" media="screen"/>

Body:

<button onClick="swapStyleSheet('css/index/index_purple.css')">Purple style</button>

<button onClick="swapStyleSheet('css/index/index_orange.css')">Orange style</button>

<button onClick="swapStyleSheet('css/index/index_blue.css')">Blue style</button>

<button onClick="swapStyleSheet('css/index/index_red.css')">Red style</button>

My page:

-LINK-

Solution

Is there any reason why you do not try to use the command in JS several times?

<script type="text/javascript">
    function swapStyleSheet(pagesheet, headsheet){
        document.getElementById('pagestyle').setAttribute('href',pagesheet);
        document.getElementById('headstyle').setAttribute('href',headsheet);
    }
</script>

The button definition would be

<button onClick="swapStyleSheet('css/index/index_purple.css','css/head/head_purple.css')">Purple style</button>