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?