Выбор цвета Onchange не изменяет цвет фона холста - PullRequest
Новая
       8

Выбор цвета Onchange не изменяет цвет фона холста

1 голос
/ 19 сентября 2019

Я пытаюсь изменить фон моего элемента canvas для школьного проекта на основе пользовательского ввода из палитры цветов.Однако я не могу заставить его работать.Я проверил код, и все, кажется, правильно выбран.Есть идеи, почему? 

docolor() {
  var myCanvas = document.querySelector("#myCanvas");
  var colorinput = document.querySelector("#clr");
  var color = colorinput.value;
  myCanvas.style.backgroundColor = color;
}


  <head>
    <title> canvas practice </title>
   </head>
  <body>
    <canvas id = "myCanvas"> 
    </canvas> 
    <br>
    <input type = "color" value = "#001A57" id = "clr" onchange = "docolor()">
  </body>
</html>

- 

#clr {
  display: inline-block;
}

#myCanvas {
  height: 150px;
  width: 300px;
  border: 2px solid;
}

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

docolor не определен правильно, поэтому он никогда не запускается.Объявите свою функцию следующим образом, и она должна работать: 

function docolor() {
  var myCanvas = document.querySelector("#myCanvas");
  var colorinput = document.querySelector("#clr");
  var color = colorinput.value;
  myCanvas.style.backgroundColor = color;
}

Дайте мне знать, если она все еще не работает. Вот ссылка на рабочий код , если вы хотите, чтобы все работало вместе.Удачи с вашим проектом!

1 голос
/ 19 сентября 2019

Похоже, вы забыли объявление function. 

<html>

<head>
  <title> canvas practice </title>
  <style>
    #clr {
      display: inline-block;
    }

    #myCanvas {
      height: 150px;
      width: 300px;
      border: 2px solid;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas">
  </canvas>
  <br>
  <input type="color" value="#001A57" id="clr" onchange="docolor()">
</body>
<script>
  function docolor() {
    var myCanvas = document.querySelector("#myCanvas");
    var colorinput = document.querySelector("#clr");
    var color = colorinput.value;
    myCanvas.style.backgroundColor = color;
  }
</script>

</html>
...