Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
199
rated 0 times [  200] [ 1]  / answers: 1 / hits: 11107  / 10 Years ago, fri, july 11, 2014, 12:00:00

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?


More From » html

 Answers
0

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>

[#43937] Thursday, July 10, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alorac

Total Points: 262
Total Questions: 82
Total Answers: 97

Location: Libya
Member since Mon, Dec 7, 2020
4 Years ago
alorac questions
Sat, Oct 10, 20, 00:00, 4 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Wed, Jul 1, 20, 00:00, 4 Years ago
Wed, Jun 3, 20, 00:00, 4 Years ago
Sun, May 17, 20, 00:00, 4 Years ago
;