Adjust the text color of a div element by clicking a button with the help of JavaScript

Question

Adjust the text color of a div element by clicking a button with the help of JavaScript

I am trying to change the font color of my div when a button is clicked using JavaScript. The two buttons I have are 'Green' and 'Red'.

<button type="button" class="green">Green</button>
<button type="button" class="red">Red</button>

Here is my div:

<div id="timer"></div>

Currently, the font color is red (default color). When 'Green' is clicked, it should turn green, and when 'Red' is clicked, it should go back to red.

It seems like a simple task, but for some reason, I can't seem to get it to work :)

If you have any insights on how to achieve this, I would greatly appreciate it.

javascript html css button colors

Answer 1

Answer №1

To easily change the color without using JQuery, you can simply add an onclick event to a button like this: http://jsfiddle.net/8jay6r3n/

Just include the following code in your HTML:

onclick="document.getElementById('timer').style.color = 'red'"

For more information on how this works, check out the documentation here: http://www.w3schools.com/js/js_htmldom_css.asp

If you prefer to use jQuery, you can view an example here: http://jsfiddle.net/8jay6r3n/2/ You have the option to use inline styles or add a class to change the text color.

Answer 2

To easily change the color without using JQuery, you can simply add an onclick event to a button like this: http://jsfiddle.net/8jay6r3n/

Just include the following code in your HTML:

onclick="document.getElementById('timer').style.color = 'red'"

For more information on how this works, check out the documentation here: http://www.w3schools.com/js/js_htmldom_css.asp

If you prefer to use jQuery, you can view an example here: http://jsfiddle.net/8jay6r3n/2/ You have the option to use inline styles or add a class to change the text color.

Answer 3

Answer №2

For those just starting out, using the jQuery library can make things much simpler.

To get started, all you need to do is insert the following code in the <head> section of your document to install jQuery and enable the $ function:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

After that, your solution could look something like this:

$('#green').click( function() { $('#timer').css('color','green'); } );
$('#red').click( function() { $('#timer').css('color','red'); } );

Answer 4

For those just starting out, using the jQuery library can make things much simpler.

To get started, all you need to do is insert the following code in the <head> section of your document to install jQuery and enable the $ function:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

After that, your solution could look something like this:

$('#green').click( function() { $('#timer').css('color','green'); } );
$('#red').click( function() { $('#timer').css('color','red'); } );

Answer 5

Answer №3

Here is an example showcasing the use of links:

Check out the Javascript code below:

<script language="javascript">
function changeBackgroundColor(color) {
  document.getElementById('clock').style.backgroundColor = color;
}
</script>

Below are the links that you can click on to change the background color:

<a href="javascript:changeBackgroundColor('#000000');">Black</a> 
<a href="javascript:changeBackgroundColor('#FF0000');">Red</a>

This is the div element that will have its background color changed by clicking the links above:

<div id="clock" style="font-weight:bold; font-size:10px">Clock</div>

It should work similarly for buttons as well.

Answer 6

Here is an example showcasing the use of links:

Check out the Javascript code below:

<script language="javascript">
function changeBackgroundColor(color) {
  document.getElementById('clock').style.backgroundColor = color;
}
</script>

Below are the links that you can click on to change the background color:

<a href="javascript:changeBackgroundColor('#000000');">Black</a> 
<a href="javascript:changeBackgroundColor('#FF0000');">Red</a>

This is the div element that will have its background color changed by clicking the links above:

<div id="clock" style="font-weight:bold; font-size:10px">Clock</div>

It should work similarly for buttons as well.

Answer 7

Answer №4

Give this a shot with some jQuery magic

$('.blue').click( function() { $('#clock').css('color','blue'); } );
$('.yellow').click( function() { $('#clock').css('color','yellow'); } );

http://jsfiddle.net/5abjk/23/

Answer 8

Give this a shot with some jQuery magic

$('.blue').click( function() { $('#clock').css('color','blue'); } );
$('.yellow').click( function() { $('#clock').css('color','yellow'); } );

http://jsfiddle.net/5abjk/23/

Answer 9

Answer №5

If you prefer utilizing jquery, the implementation process becomes much simpler. You can include the function in a JavaScript file or within a <script> tag.

   $('#timer').css('color','green'); 
});
$('#red').click( function() {
   $('#timer').css('color','red'); 
});

Alternatively, if you opt for using pure javascript, you can utilize either "addEventListener" or 'click' for handling click events and then specify styling for each tag/element where you wish to apply css.

Answer 10

If you prefer utilizing jquery, the implementation process becomes much simpler. You can include the function in a JavaScript file or within a <script> tag.

   $('#timer').css('color','green'); 
});
$('#red').click( function() {
   $('#timer').css('color','red'); 
});

Alternatively, if you opt for using pure javascript, you can utilize either "addEventListener" or 'click' for handling click events and then specify styling for each tag/element where you wish to apply css.

Adjust the text color of a div element by clicking a button with the help of JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The Ajax post function successfully executes on the first attempt, but on subsequent tries it does

Resetting values in Javascript and JQuery when clicking a button

What is preventing me from retrieving an ID value within an IF condition?

Encountering issues with the functionality of async await

Steps to trigger an alert when the entered quantity exceeds the current stock levels

What is the correct way to integrate a new component into my JHipster + Angular project while ensuring that the routerlink functions properly?

The attempt to connect with react-native-fetch-blob has not been successful

In CodeIgniter, the $this->input->post() function consistently returns an empty value

Filtering objects by their properties or attributes in AngularJS can be achieved by using forEach, but encountering an error stating "forEach is

Selecting and Uploading Multiple Files in Internet Explorer (less than version 9)

Creating a new dynamic page can be achieved by clicking on a dynamically generated link. Would you like to learn how to do that?

Tips for hovering over a link with Webdriver

Include the circle.css file in the Angular 4 project by loading it in the head section of the

The autocomplete feature in Codemirror seems to be failing specifically when writing JavaScript code

No feedback received after sending keys using Selenium

Encountering a situation where attempting to retrieve JSON data results in receiving an undefined

Opt for Observable over Promise in your applications

How can I retrieve console log information in POSTMAN when a test fails?

Is it possible to restructure the address 51.xx.xx.xx:33xxx:user:pass to display as user:[email protected] :33xxx instead?

Unable to connect to server using React-Native fetch. Localhost is not being used