Change Header Background Colour with Button

I am have created a custom theme for my tumblr blog. I am trying to add a button that will change the colour of my header background for end users. I would just like 3 buttons for blue(#4BD4DE), red(red) and green(#1FDE2C). I have a limited understanding of Javascript. I have used <button> and <input>. What i have tried so far, `

<script>
$("btnBlue").on("click", function() {
  document.header.style.backgroundColor = 'blue';
});
</script>`

But this does nothing. Any help? I have checked other questions on stack overflow but none worked, and I don't have enough knowledge to change the posted code.

Code i am using relevant to this

<!DOCTYPE html>

<html>
<head>

<!-- CSS Style -->

<style>
header {
    background: #4BD4DE;
    border-radius: 5px;
    height: 300px;
}
</style>
</head>

<!-- Tumblr styling here -->

<!-- BUTTONS -->
<button class="btnBlue">Change Colour</button> <button class="btnRed">Change      Colour</button> <button class="btnGreen">Change Colour</button>


<!-- JavaScript -->
<script>
$("btnBlue").on("click", function() {
  document.header.style.backgroundColor = 'blue';
});
</script>

</body>
</html>

UPDATE: None of the code apears to be working, maybe a tumblr problem... but it tumbr apears to support javascript. If anyone out there is a tumblr theme writer then, would it work, any help?

Solution

It's quite simple just use three buttons to pass the color you want into the function that changes the background. I hope this is what you were looking for.

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Header</h1>
<input type="button" value="Blue" onclick="color('#4BD4DE')">
<input type="button" value="Red" onclick="color('red')">
<input type="button" value="Green" onclick="color('#1FDE2C')">
<script>

function color(col){
document.getElementById("header").style.backgroundColor=col;

}

</script>

</body>
</html>