How to change an element color based on value of the color picker value using onclick?

How to Change Element Color Based on Color Picker Value?

Last Updated : 10 Oct, 2024

Changing an element’s color based on the color picker’s value involves using a color input element to select a color, and then, upon clicking a button or triggering an event, updating the target element’s background or text color to match the selected color.

Approach

HTML Structure:
- Structure: Includes a color input and paragraphs to change text color dynamically using JavaScript.
- Color Picker: The <input type=”color”> element allows selecting colors, with an initial default value.
JavaScript Logic
- Initialization: On page load, set up the color picker and add event listeners for changes.
- Update Single Element: updateFirst changes the first paragraph’s color based on the color picker’s value.
- Update All Elements: updateAll changes all paragraphs’ colors when the color value changes.

Example: Here we are following above-explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        change an element color based on value
    </title>
</head>

<body>

    <p>GeeksforGeeks</p>

    <label for="colors">Color:</label>
    <input type="color" value="#ff0000" id="colors" />

    <p>A Computer Science Portal For Geeks.</p>

    <script>
        let colors;
        let defaultColor = "#0000ff";
        window.addEventListener("load", startup, false);
        function startup() {
            colors = document.querySelector("#colors");
            colors.value = defaultColor;
            colors.addEventListener("input", updateFirst, false);
            colors.addEventListener("change", updateAll, false);
            colors.select();
        }
        function updateFirst(event) {
            let p = document.querySelector("p");
            if (p) {
                p.style.color = event.target.value;
            }
        }
        function updateAll(event) {
            document.querySelectorAll("p").forEach(function (p) {
                p.style.color = event.target.value;
            });
        }
    </script>
</body>

</html>

Output:

How to change an element color based on value of the color picker value using onclick?

R

rumakr03

Improve

Article Tags :

Similar Reads

How to change an element color based on value of the color picker value on click?

Changing an element's color based on the color picker's value involves using a color input element to select a color, and then, upon clicking a button or triggering an event, updating the target element's background or text color to match the selected color. ApproachHTML Structure:Structure: Include

How to change an element color based on value of the color picker value using onclick?

We can define color picker by input type="color". It provides a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format. Only colors without alpha channels are allowed. Though CS

How to change background color when hover over li elements using CSS ?

In this article, we will see how to change the background color of li (list item) on hover using CSS. The hover effect may be used to indicate interactivity or might just be there for aesthetic purposes, like highlighting different items in case of a list. Hover event can be styled using the :hover

How to choose background color through color picker?

In this project, we are going to change the background color with the help of the Color Picker. Glimpse of the Project: Approach: Create an HTML file in which we are going to add the text and a color picker which helps to change theÂ background color of our web-page.Create a CSS style to give some an

How to add a specific color to an element using CSS ?

In this article, we will discuss elements and how to add a specific color to an element using CSS properties. Basically, the HTML element is the collection of start and end tags with the content inserted in between them. Elements can be nested. <tagname> Content </tagname> Note: Please r

How to Change the Color of an SVG Element in React Native ?

In this article, we are going to learn about changing the color of an SVG by using React Native. SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Changing the color of an SVG in Reac

How to add color picker in a form using HTML ?

In this article, we will learn how to add a color picker in a form using HTML. As we know, a color picker is also known as a color-chooser. It is an interface in which a user can select a single color from multiple collections of background colors. When we submitted the color, the browser convert it

How to change text color depending on background color using JavaScript?

The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript. Approach: First, select the random Background color(by selecting random RGB values) or a specific one.Use the YIQ

How to Change Background Color with Color Range Slider in HTML?

To Change the Background Color using an HTML rounded slider that dynamically changes the webpage's background as the slider thumb is moved along its track, giving a visual indication of the selected color. The approach provides a convenient method for customizing the visual appearance of the webpage

How to verify the color and background color of a web element in Selenium?

Sometimes when we perform automated testing using the Selenium software, it becomes an important task to verify if the background colour of web elements is as expected, for this we can use the Selenium software and perform some test cases to verify the background colour and element colour. There are