Onchange 颜色选择器不更改画布背景颜色答案

【问题标题】：Onchange color picker not changing canvas background colorOnchange 颜色选择器不更改画布背景颜色
【发布时间】：2019-09-19 15:29:40
【问题描述】：

我正在尝试根据来自颜色选择器的用户输入来更改学校项目的画布元素的背景。但是我似乎无法让它工作。我检查了代码，一切似乎都被正确选择了。关于为什么的任何想法？

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

【问题讨论】：

标签： javascript html css canvas onchange

【解决方案1】：

docolor 没有正确定义，所以它永远不会运行。像这样声明你的函数，它应该可以工作：

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

如果它仍然不起作用，请告诉我。 Here's a link to a working codepen 如果你想看到所有的东西一起工作。祝你的项目好运！

【讨论】：

感谢 codepen 链接。我添加了函数声明，它仍然没有工作。然后检查了我们代码中的差异，并意识到我有一个额外的未声明的函数，当我试图做项目的下一部分时，它把事情搞砸了。谢谢！

【解决方案2】：

您似乎忘记了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>

【讨论】：