How do you change the color of a click in html?

Table of Contents #

  1. Change the page's background color on click
  2. Change the elements's background color on click
  3. Change another element's background color on click

Change the pages's background color on click #

To change the page's background color on click:

  1. Add a click event listener to an element.
  2. Each time the element is clicked, set the document.body.style.backgroundColor property to a specific color.

Here is the HTML for the example in this article.

Copied!

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> head> <body> <div id="box">Some text herediv> <button id="btn">Buttonbutton> <script src="index.js">script> body> html>

And here is the related JavaScript code.

Copied!

const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; });

How do you change the color of a click in html?

We added a click event listener to the button, so a function is invoked every time the button is clicked.

Each time the button is clicked, we set the document.body.style.backgroundColor property to salmon and change the page's background color.

Change the element's background color on click #

To change an element's background color on click:

  1. Add a click event listener to the element.
  2. Assign the event object to a variable in the function.
  3. Set the event.target.style.backgroundColor property to the specific background color.

Copied!

const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { // 👇️ change background color event.target.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // event.target.style.color = 'white'; });

How do you change the color of a click in html?

Every time the button from the example is clicked, its own background color gets set.

We used the target property on the event object. The target property is a reference to the object (element) on which the event was dispatched.

In other words, event.target gives us access to the DOM element the user clicked.

You can console.log the target property to see the DOM element which was clicked by the user.

Copied!

const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { console.log(event.target); // 👇️ change background color event.target.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // event.target.style.color = 'white'; });

How do you change the color of a click in html?

If you click on the button and look at your console output, you'll see the button element being logged.

Change another element's background color on click #

To change another element's background color on click:

  1. Add a click event listener to one of the elements.
  2. Each time the element is clicked, change the style.backgroundColor property of the other element.

Here is the HTML for the example.

Copied!

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> head> <body> <div id="box">Some text herediv> <button id="btn">Buttonbutton> <script src="index.js">script> body> html>

And here is the related JavaScript code.

Copied!

const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { const box = document.getElementById('box'); box.style.backgroundColor = 'coral'; // 👇️ optionally change text color // box.style.color = 'white'; });

How do you change the color of a click in html?

Each time the button is clicked, we change the div's background color to coral.

How do I change the background color when I click the button?

Step by Step Implementation.
Open the colors.xml file by navigating to the app -> res -> values -> colors.xml..
Create a color tag inside the resources tag with a name and set a color with its hex code..

How do I change the color of a clicked button in CSS?

To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the . button selector, you use background-color:#0a0a23; to change the background color of the button.

How do I change the text on a click in HTML?

If you need to change the button's inner HTML, use the innerHTML property instead of textContent . Copied!.
Add a click event listener to the button..
Use the textContent property to change the button's text..
For example, btn. textContent = 'Button clicked' ..

How do I change the color of text when clicked in CSS?

The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on

and

element and set its colour as yellow with green background.