Scribd
Upload
14 views

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

Uploaded by

geetansh ibm
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

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

Uploaded by

geetansh ibm
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

The purpose of this article is to explore a method for dynamically changing the color of

an element based on the value of a color picker that is selected by the user when they
click on the element. This approach will be implemented using a combination of
JavaScript, CSS, and HTML programming languages.

We will explore the steps required to create a program that allows the user to select a
color from a color picker and then apply that color to an element on the web page when
the user clicks on it. This functionality will be achieved through the use of an onclick
event attached to the target element, which will trigger a JavaScript function that
modifies the CSS of the element to reflect the selected color.

Following is the step wise procedure to change an element color based on value of the
color picker value on click:

Step 1: To change the color of desired element based on the value of the color picker
the user need to call the onclick() event of the element and change its CSS color property
as per the selected value in the color picker element.

Step 2: The value appears as the color picker’s value attribute. using JavaScript, the color
of the selected element is to be set as the chosen value in the color picker.

OnClick() Event- This event is a JavaScript event that is used to trigger a function when
an HTML element is clicked. This generally occurs when the user clicks on an element. It
allows the programmer to execute a JavaScript's function when an element gets clicked.
This event can be used for validating a form, warning messages and many more.

Syntax:

Following is the generic syntax of the entire program where there an onclick event that
changes the color of an element within a div container based on the value of a color
picker that the user selects.

<div id="elementId" onclick="fn_name()"></div>

< input name="ColorPickerId" type="color" id="ColorPickerName" />

</div>

<script>

document.getElementById("elementID").style.Color =

document.getElementById("ColorPickerId").value;

</script>
Approach
In this approach, the user can change the color of an element based on the value of a
color picker that they select. To achieve this functionality, the user needs to add an
onclick event to the desired element in their HTML code. This event should be linked to a
JavaScript function that will be responsible for changing the color of the element.

The JavaScript function should access the value of the color picker selected by the user,
and then use this value to modify the color of the desired element using CSS. This can be
done by setting the style attribute of the element to include the new color value, like so:
document.getElementById("myElement").style.backgroundColor =
selectedColor;

Here, myElement is the ID of the HTML element that the user wants to change the color
of, and selectedColor is the value of the color picker selected by the user.

By implementing this approach, the user can dynamically change the color of an element
on their web page based on the user's input.

Program 1:
The following program is designed to allow the user to change the color of a circle
element based on the value of a color picker. This functionality is implemented using an
onclick event that is attached to the div element in the HTML code. When a user clicks on
the div, a color picker pops up, which enables the user to select their desired color. Once
the user has selected their preferred color, the color of the circle element will be changed
dynamically to reflect the user's choice. To implement this functionality in the HTML
code, the user will need to create a div element that contains the circle element they
wish to modify, as well as an onclick event handler that is attached to the div. This event
handler should be linked to a JavaScript function that will be responsible for modifying
the color of the circle element based on the user's input. The JavaScript function should
access the value of the color picker selected by the user, and then use this value to
modify the color of the circle element using CSS. This can be done by setting the style
attribute of the circle element to include the new color value, Here, element is the ID of
the circle element, and ‘ColorPicker’ is the value of the color picker selected by the
user. By implementing this program, the user can dynamically change the color of the
circle element on their web page based on the user's input.
<!DOCTYPE html>

<html>

<title>Online HTML Editor</title>

<head>

</head>

<style>

#element {

height: 200px;
width: 250px;

background-color: black;

border-radius: 50%;

display: inline-block;

</style>

<div id="element" onclick="changeColor()">

</div>

<input name="ColorPicker" type="color" id="ColorPicker" />

<script>

function changeColor() {

document.getElementById(

"element").style.backgroundColor =

document.getElementById(

"ColorPicker").value;

</script>

<body>

</body>

</html>

Output:
Program 2:

In this particular program, we have chosen to implement the functionality of changing


the color of an element based on the value of a color picker through the header of a
webpage. This has been achieved by adding an onclick event to the header tag in the
HTML code, which triggers a JavaScript function that modifies the CSS of the header
element based on the color selected by the user from the color picker.By selecting the
header element as the target for the color change feature, the program provides a
simple and intuitive way for users to customize the appearance of the webpage
according to their preferences. When the user clicks on the header, a color picker pops
up, allowing them to select the desired color. The JavaScript function then takes this
color value and applies it to the CSS of the header, resulting in a visually appealing and
personalized design in HTML programming language.

<!DOCTYPE html>
<html>

<title>Online HTML Editor</title>

<head>

</head>

<h1 id="element" onclick="changeColor()">

Welcome To Tutorial Point

</h1>

</div>

<input name="ColorPicker" type="color" id="ColorPicker" />

<script>

function changeColor() {

document.getElementById(

"element").style.color =

document.getElementById(

"ColorPicker").value;

</script>

<body>

</body>

</html>

Output:
Supported Browsers: The browsers supported by pointer-events Property are listed
below:

● Google Chrome 1.0

● Edge 12.0

● Internet Explorer 11.0

● Firefox 1.5

● Opera 9.0

● Safari 4.0

This article was focused on how to change an element color


based on value of the color picker value on click by using
JavaScript and CSS Properties.

You might also like