Javascript – Change font color of div on click of button using javascript

buttoncolorscsshtmljavascript

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.

Best Answer

I think it's the simplest solution to change color without Jquery : http://jsfiddle.net/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.com/js/js_htmldom_css.asp


If you want to use jQuery, than here example http://jsfiddle.net/8jay6r3n/2/ You can use inline style or add class to change color of text.