CODEWITHSUNDEEP
javascripthtmlbackground-color
Dominik
Dominik

Reputation: 588

ColorPicker does not respond

Goal: I would like to select a color through color picker HTML element and immediately after this change I would like to see canvas element in the same color.

The issue: I can select color through the color picker, but my canvas rectangle is not changing the color. All of the questions are focused on more robust solutions (i.e. with JBOSS or jQuery or SpringBoot)

Like here:

What I tried:

function setColorAccordingToColorPicker() {
    var rectangle = getElementById("canvasColorpicker");
    var colorinput = document.getElementById("colorPicker");
    var color = colorinput.value;
    rectangle.fillStyle = color;
    rectangle.fillRect(20, 20, 60, 60);
}

None of them helped.

MCVE:

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Example</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <canvas id="canvasColorpicker" class="white"></canvas>
    <input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
    <script src="javascript.js"></script>
</body>
</html>

Javascript

function setColorAccordingToColorPicker() {
    var rectangle = getElementById("canvasColorpicker");
    var colorinput = document.getElementById("colorPicker");
    var color = colorinput.value;
    rectangle.style.backgroundColor = color;
}

CSS

.white {
    background-color: #001A57;
}

canvas {
    width: 200px;
    height: 100px;
    margin: 10px;
    border: 1px solid lighgrey;
}

Can someone help and see what's wrong? Thanks!

Upvotes: 0

Views: 255

Answers (1)

Rob Moll
Rob Moll

Reputation: 3453

function setColorAccordingToColorPicker() {
    var rectangle = document.getElementById("canvasColorpicker");
    var colorinput = document.getElementById("colorPicker");
    var color = colorinput.value;
    rectangle.style.backgroundColor = color;
}
.white {
    background-color: #001A57;
}

canvas {
    width: 200px;
    height: 100px;
    margin: 10px;
    border: 1px solid lighgrey;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Example</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <canvas id="canvasColorpicker" class="white"></canvas>
    <input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
    <script src="javascript.js"></script>
</body>
</html>

One little change needed:

Change this: var rectangle = getElementById("canvasColorpicker");

To: var rectangle = document.getElementById("canvasColorpicker");

Upvotes: 4

Related Questions