Javascript 获取错误“；addEventListener不是一个函数；

我想从颜色选择器中选择我的颜色，然后在画布中使用此颜色进行绘制。 我得到一个错误：

Uncaught TypeError: colors.addEventListener is not a function
at window.onload

我用这个

我在调用函数时得到错误：

colors.addEventListener('click', function(event)

我的html：

  <div class="picker"
       acp-color="#EFE9E7"
       acp-palette="#f44336|#e91e63|#9c27b0|#673ab7|#3f51b5|#2196f3|#03a9f4|#00bcd4|
     #009688|#4caf50|#8bc34a|#cddc39|#cddc39|#ffeb3b|#ffc107|#ff9800|#ff5722|#795548|#9e9e9e|#20707|#befe7ee|#9e9e9e|#9e9e5e|#9e4e9e">
  </div>

  <div class="right-block">
    <canvas id="paint-canvas" width="640" height="400"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/a-color-picker@1.1.8/dist/acolorpicker.js"></script>
  <script src="./paint.js"></script>

---

不能将事件侦听器添加到字符串中

var colors=“#f44336”；
colors.addEventListener（'click'，函数（事件）{
context.strokeStyle=event.target.value | | |“黑色”；
});

---

字符串没有此方法。假设它在picker on change事件之后仍然是一个字符串。

问题是，在拾取颜色更改时触发事件时，您需要更改

上下文。strokeColor

，因此您应该创建

AColorPciker

元素的引用，并在加载文档时使用其事件发射器

然后您可以轻松地更改您的

笔划颜色

，我希望这对您有用

我正在添加已编辑的脚本，它应该适合您

// Initializing the color picker reference
var colorPicker = AColorPicker.from('.picker');



var canvas = document.getElementById("paint-canvas");
var context = canvas.getContext("2d");
var boundings = canvas.getBoundingClientRect();


window.onload = function () {

    // Definitions


    // Specifications
    var mouseX = 0;
    var mouseY = 0;
    context.strokeStyle = 'black'; // initial brush color
    context.lineWidth = 1; // initial brush width
    var isDrawing = false;

    // Here I am using the refernce of AColorPicker to set the context Stroke color, when the change is emitted on the color change
    colorPicker.on('change', (picker, color) => {
      context.strokeStyle = color;
    });



    // Mouse Down Event
    canvas.addEventListener('mousedown', function(event) {
        setMouseCoordinates(event);
        isDrawing = true;

        // Start Drawing
        context.beginPath();
        context.moveTo(mouseX, mouseY);
    });

    // Mouse Move Event
    canvas.addEventListener('mousemove', function(event) {
        setMouseCoordinates(event);

        if(isDrawing){
            context.lineTo(mouseX, mouseY);
            context.stroke();
        }
    });




    // Mouse Up Event
    canvas.addEventListener('mouseup', function(event) {
        setMouseCoordinates(event);
        isDrawing = false;
    });

    // Handle Mouse Coordinates
    function setMouseCoordinates(event) {
        mouseX = event.clientX - boundings.left;
        mouseY = event.clientY - boundings.top;
    }


};

---

我理解这个问题，但我无法让我的项目工作。我创建了一个JSFIDLE。你能在那里编辑吗？请重新表述您的问题，并解释您试图使用此事件侦听器实现的目标。我只想在颜色选择器中选择我的颜色，并在画布中使用此选择的颜色进行绘制。正如您从代码中看到的。事情并不是那么简单。是你写的代码吗？你想添加此事件侦听器肯定有原因。你能在我的js FIDLE中编辑它吗？其中

loadInput

变量已定义？？为此添加了解决方案

// Initializing the color picker reference
var colorPicker = AColorPicker.from('.picker');



var canvas = document.getElementById("paint-canvas");
var context = canvas.getContext("2d");
var boundings = canvas.getBoundingClientRect();


window.onload = function () {

    // Definitions


    // Specifications
    var mouseX = 0;
    var mouseY = 0;
    context.strokeStyle = 'black'; // initial brush color
    context.lineWidth = 1; // initial brush width
    var isDrawing = false;

    // Here I am using the refernce of AColorPicker to set the context Stroke color, when the change is emitted on the color change
    colorPicker.on('change', (picker, color) => {
      context.strokeStyle = color;
    });



    // Mouse Down Event
    canvas.addEventListener('mousedown', function(event) {
        setMouseCoordinates(event);
        isDrawing = true;

        // Start Drawing
        context.beginPath();
        context.moveTo(mouseX, mouseY);
    });

    // Mouse Move Event
    canvas.addEventListener('mousemove', function(event) {
        setMouseCoordinates(event);

        if(isDrawing){
            context.lineTo(mouseX, mouseY);
            context.stroke();
        }
    });




    // Mouse Up Event
    canvas.addEventListener('mouseup', function(event) {
        setMouseCoordinates(event);
        isDrawing = false;
    });

    // Handle Mouse Coordinates
    function setMouseCoordinates(event) {
        mouseX = event.clientX - boundings.left;
        mouseY = event.clientY - boundings.top;
    }


};