ColorPicker не отвечает - PullRequest
Новая
       1

ColorPicker не отвечает

0 голосов
/ 08 февраля 2020

Цель: я хотел бы выбрать цвет с помощью элемента выбора цвета HTML, и сразу после этого изменения я хотел бы видеть элемент холста того же цвета.

Проблема: я могу выбрать цвет с помощью Выбор цвета, но мой прямоугольник холста не меняет цвет. Все вопросы направлены на более надежные решения (например, с JBOSS или jQuery или SpringBoot)

Как здесь:

Что я пробовал:

  • Прочитайте похожие вопросы здесь
  • Различные имена ID
  • Различные имена методов
  • Различные цвета в белом CSS Класс
  • Различные браузер
  • Другой метод доступа к холсту, см. Ниже: 
function setColorAccordingToColorPicker() {
    var rectangle = getElementById("canvasColorpicker");
    var colorinput = document.getElementById("colorPicker");
    var color = colorinput.value;
    rectangle.fillStyle = color;
    rectangle.fillRect(20, 20, 60, 60);
}

Ни один из них не помог.

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;
}

Может кто-нибудь помочь и понять, в чем дело? Спасибо!

1 Ответ

3 голосов
/ 08 февраля 2020 

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>

Требуется одно небольшое изменение:

Измените это: var rectangle = getElementById("canvasColorpicker");

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

...