How to change div border-color by input value?
My Code
<div id=divx"> </div>
<button onClick=""> </button>
<script>
function myFunction() {
var color = document.getElemntByID("inpx").value;
document.getElementById("divx").style.borderColor = color;
}
</script>
on* inline JS handlers/attributes. Use Element.addEventListener(). JS should in in one place only, and that's either your JavaScript tag or file.getElemntByID should be getElementByIdtype="color"Create a reusable setBorderColor(Element, color) function:
const EL = (sel, EL) => (EL||document).querySelector(sel);
const setBorderColor = (el, color) => el.style.borderColor = color;
const EL_inpx = EL("#inpx");
const EL_divx = EL("#divx");
EL_inpx.addEventListener("input", () => {
setBorderColor(EL_divx, EL_inpx.value);
});
setBorderColor(EL_divx, EL_inpx.value);#divx {border: 10px solid transparent;}<input id="inpx" type="color" value="#ff0088">
<div id="divx">test</div>
// colors source: https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json
const colors = {
"aliceblue": "#f0f8ff",
"antiquewhite": "#faebd7",
"aqua": "#00ffff",
"aquamarine": "#7fffd4",
"azure": "#f0ffff",
"beige": "#f5f5dc",
"bisque": "#ffe4c4",
"black": "#000000",
"blanchedalmond": "#ffebcd",
"blue": "#0000ff",
"blueviolet": "#8a2be2",
"brown": "#a52a2a",
"burlywood": "#deb887",
"cadetblue": "#5f9ea0",
"chartreuse": "#7fff00",
"chocolate": "#d2691e",
"coral": "#ff7f50",
"cornflowerblue": "#6495ed",
"cornsilk": "#fff8dc",
"crimson": "#dc143c",
"cyan": "#00ffff",
"darkblue": "#00008b",
"darkcyan": "#008b8b",
"darkgoldenrod": "#b8860b",
"darkgray": "#a9a9a9",
"darkgreen": "#006400",
"darkgrey": "#a9a9a9",
"darkkhaki": "#bdb76b",
"darkmagenta": "#8b008b",
"darkolivegreen": "#556b2f",
"darkorange": "#ff8c00",
"darkorchid": "#9932cc",
"darkred": "#8b0000",
"darksalmon": "#e9967a",
"darkseagreen": "#8fbc8f",
"darkslateblue": "#483d8b",
"darkslategray": "#2f4f4f",
"darkslategrey": "#2f4f4f",
"darkturquoise": "#00ced1",
"darkviolet": "#9400d3",
"deeppink": "#ff1493",
"deepskyblue": "#00bfff",
"dimgray": "#696969",
"dimgrey": "#696969",
"dodgerblue": "#1e90ff",
"firebrick": "#b22222",
"floralwhite": "#fffaf0",
"forestgreen": "#228b22",
"fuchsia": "#ff00ff",
"gainsboro": "#dcdcdc",
"ghostwhite": "#f8f8ff",
"goldenrod": "#daa520",
"gold": "#ffd700",
"gray": "#808080",
"green": "#008000",
"greenyellow": "#adff2f",
"grey": "#808080",
"honeydew": "#f0fff0",
"hotpink": "#ff69b4",
"indianred": "#cd5c5c",
"indigo": "#4b0082",
"ivory": "#fffff0",
"khaki": "#f0e68c",
"lavenderblush": "#fff0f5",
"lavender": "#e6e6fa",
"lawngreen": "#7cfc00",
"lemonchiffon": "#fffacd",
"lightblue": "#add8e6",
"lightcoral": "#f08080",
"lightcyan": "#e0ffff",
"lightgoldenrodyellow": "#fafad2",
"lightgray": "#d3d3d3",
"lightgreen": "#90ee90",
"lightgrey": "#d3d3d3",
"lightpink": "#ffb6c1",
"lightsalmon": "#ffa07a",
"lightseagreen": "#20b2aa",
"lightskyblue": "#87cefa",
"lightslategray": "#778899",
"lightslategrey": "#778899",
"lightsteelblue": "#b0c4de",
"lightyellow": "#ffffe0",
"lime": "#00ff00",
"limegreen": "#32cd32",
"linen": "#faf0e6",
"magenta": "#ff00ff",
"maroon": "#800000",
"mediumaquamarine": "#66cdaa",
"mediumblue": "#0000cd",
"mediumorchid": "#ba55d3",
"mediumpurple": "#9370db",
"mediumseagreen": "#3cb371",
"mediumslateblue": "#7b68ee",
"mediumspringgreen": "#00fa9a",
"mediumturquoise": "#48d1cc",
"mediumvioletred": "#c71585",
"midnightblue": "#191970",
"mintcream": "#f5fffa",
"mistyrose": "#ffe4e1",
"moccasin": "#ffe4b5",
"navajowhite": "#ffdead",
"navy": "#000080",
"oldlace": "#fdf5e6",
"olive": "#808000",
"olivedrab": "#6b8e23",
"orange": "#ffa500",
"orangered": "#ff4500",
"orchid": "#da70d6",
"palegoldenrod": "#eee8aa",
"palegreen": "#98fb98",
"paleturquoise": "#afeeee",
"palevioletred": "#db7093",
"papayawhip": "#ffefd5",
"peachpuff": "#ffdab9",
"peru": "#cd853f",
"pink": "#ffc0cb",
"plum": "#dda0dd",
"powderblue": "#b0e0e6",
"purple": "#800080",
"rebeccapurple": "#663399",
"red": "#ff0000",
"rosybrown": "#bc8f8f",
"royalblue": "#4169e1",
"saddlebrown": "#8b4513",
"salmon": "#fa8072",
"sandybrown": "#f4a460",
"seagreen": "#2e8b57",
"seashell": "#fff5ee",
"sienna": "#a0522d",
"silver": "#c0c0c0",
"skyblue": "#87ceeb",
"slateblue": "#6a5acd",
"slategray": "#708090",
"slategrey": "#708090",
"snow": "#fffafa",
"springgreen": "#00ff7f",
"steelblue": "#4682b4",
"tan": "#d2b48c",
"teal": "#008080",
"thistle": "#d8bfd8",
"tomato": "#ff6347",
"turquoise": "#40e0d0",
"violet": "#ee82ee",
"wheat": "#f5deb3",
"white": "#ffffff",
"whitesmoke": "#f5f5f5",
"yellow": "#ffff00",
"yellowgreen": "#9acd32"
};
const colorTextInput = document.querySelector("#colorTextInput");
const colorSelector = document.querySelector("#colorSelector");
const updateColorBtn = document.querySelector("#updateColorBtn");
// hexToRgb function source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb#answer-5624139
const rgbToHex = (r, g, b) => {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
const getHexColor = (color) => {
if (color.length === 0) {
return null;
}
// regex source: https://www.geeksforgeeks.org/how-to-validate-hexadecimal-color-code-using-regular-expression/
const isHexColor = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$").test(color);
if (isHexColor) {
// Three digit hex to six digit converter
// Source: https://gomakethings.com/converting-a-color-from-a-three-digit-hexcolor-to-a-six-digit-hexcolor-with-vanilla-js/
if (color.length === 4) {
hexColor = color.substr("#".length).split('').map(function (hex) {
return hex + hex;
}).join('');
return "#" + hexColor;
}
return color;
}
else {
if (color.startsWith("rgba(")) {
color = "rgb" + color.substr("rgba".length);
}
if (color.startsWith("rgb(")) {
const csv = color.substr("rgb(".length, color.length - ("rgb(".length + ")".length));
const rgb = csv.split(",").map(function(item) {
return Number(item);
});
if (rgb.length === 3 || rgb.length === 4) {
return rgbToHex(rgb[0], rgb[1], rgb[2]);
}
else {
return null;
}
}
else {
let hexColor = colors[color.toLowerCase()];
if (typeof hexColor === "string") {
return hexColor;
}
return null;
}
}
}
colorTextInput.addEventListener("input", () => {
let hexColor = getHexColor(colorTextInput.value);
if (hexColor !== null) {
colorTextInput.classList.remove("invalid");
colorSelector.value = hexColor;
}
else {
colorTextInput.classList.add("invalid");
}
});
colorSelector.addEventListener("input", () => {
colorTextInput.classList.remove("invalid");
colorTextInput.value = colorSelector.value;
})
updateColorBtn.addEventListener("click", () => {
document.getElementById("colorOutput").style.borderColor = colorSelector.value;
});#colorOutput
{
width: 50px;
height: 50px;
border-width: 3px;
border-style: solid;
margin-bottom: 1rem;
}
#colorTextInput {
outline: none;
}
#colorTextInput.invalid {
border-color: #d93025;
}
#colorControls {
display: flex;
gap: .25rem;
}
#colorControls > * {
border-radius: 0.25rem;
border: 1px solid black;
}
#colorSelector {
width: 2rem;
outline: none;
-webkit-appearance: none;
}
#colorSelector::-webkit-color-swatch-wrapper {
padding: 0;
}
#colorSelector::-webkit-color-swatch {
border: none;
margin: 1px 0px;
border-radius: .25rem;
}<div id="colorOutput" style="border-color: #4169e1;"></div>
<div id="colorControls">
<input id="colorTextInput" type="text" value="royalblue">
<input id="colorSelector" type="color" value="#4169e1">
<button id="updateColorBtn">Set border color</button>
</div>
try this: run
function myFunction() {
const color = document.getElementById("inpx").value;
document
.getElementById("divx")
.setAttribute("style", "background-color:" + color);
}
