I want to change the font color of my div on the click of a button using javascript. I have two buttons, 'Green" and 'Red'.
<button type="button" class="green">Green</button>
<button type="button" class="red">Red</button>
This is my div
<div id="timer"></div>
currently the font is red (default color), but once 'green' is clicked it will go green and when 'red' is clicked it will go back to red.
I know this is probably very simply but for some reason I can't get it to work :)
If you know how would be greatly appreciated.
I want to change the font color of my div on the click of a button using javascript. I have two buttons, 'Green" and 'Red'.
<button type="button" class="green">Green</button>
<button type="button" class="red">Red</button>
This is my div
<div id="timer"></div>
currently the font is red (default color), but once 'green' is clicked it will go green and when 'red' is clicked it will go back to red.
I know this is probably very simply but for some reason I can't get it to work :)
If you know how would be greatly appreciated.
Share Improve this question asked Nov 21, 2014 at 10:34 user3594463user3594463 1231 gold badge5 silver badges13 bronze badges5 Answers
Reset to default 3I think it's the simplest solution to change color without Jquery : http://jsfiddle/8jay6r3n/
Just add onclick event to button like this : onclick="document.getElementById('timer').style.color = 'red'"
Some documentation about it exist here : http://www.w3schools./js/js_htmldom_css.asp
If you want to use jQuery, than here example http://jsfiddle/8jay6r3n/2/
You can use inline style or add class to change color of text.
If you're getting started with this stuff, you will have a much easier time if you use the jQuery library.
Simply add the following code inside the <head> of your document to install jQuery and give you access to the $ function:
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Now your solution should be something like:
$('#green').click( function() { $('#timer').css('color','green'); } );
$('#red').click( function() { $('#timer').css('color','red'); } );
This is a example with links :
the Javascript :
<script language="javascript">
function changecolor(color) {
document.getElementById('timer').style.color=color;
}
</script>
Your links :
<a href="javascript:changecolor('#000000');">Black</a>
<a href="javascript:changecolor('#FF0000');">Red</a>
Your div :
<div id="timer" style="font-weight:bold; font-size:10px">Timer</div>
For buttons, its probably the same.
try this using jQuery
$('.green').click( function() { $('#timer').css('color','green'); } );
$('.red').click( function() { $('#timer').css('color','red'); } );
http://jsfiddle/8dhzK/55/
If you are using jquery then it will be lot easier to implement. You can the function in either js file or <script> tag.
$('#timer').css('color','green');
});
$('#red').click( function() {
$('#timer').css('color','red');
});
And if you want to use pure javascript, use either "addEventListener" or 'click' for the click event and then add styling in each tag/element you want to apply css on.