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.
<!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:
