Geting Error ,, addEventListener不是一个函数“

Question

我想从颜色选择器中选择颜色，然后在画布上绘制该颜色。我收到错误，未捕获的TypeError：colors.addEventListener不是一个函数在window.onload“。

我使用npm颜色选择器https://www.npmjs.com/package/a-color-picker。

我在调用函数时收到错误，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/[email protected]/dist/acolorpicker.js"></script>
  <script src="./paint.js"></script>

我的js代码

var colors="#f44336";

AColorPicker.from('.picker')
    .on('change', (picker, color) => {
        colors= color;

    });



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;

    loadInput.addEventListener('change', (event) => this.load(event));

    // Handle Colors


    colors.addEventListener('click', function(event) {
        context.strokeStyle = event.target.value || 'black';
    });

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

};

Answer 1

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

var colors="#f44336";

colors.addEventListener('click', function(event) {
        context.strokeStyle = event.target.value || 'black';
    });

字符串没有此方法。

我假设您想将此添加到picker元素中

document.querySelector('.picker').addEventListener('click',(event) => {
    context.strokeStyle = event.target.value || 'black';
});