p5 js drawing app, trying to pick colour from HTML colour selector

Question

this is my first question on stackoverflow, so please go easy on me .

this is the code I'm using to pick the colour from the html selector:

function ColourPalette()
    {
        this.selectedColour="000000";
        this.alpha =1;

        this.loadColours = function()
            {
             this.setColour(this.colorAlpha($("#colourInput").val(), this.alpha));
             };
    
        this.setColour = function (colour)
            {
             this.selectedColour = colour;
        
             d.fill(this.selectedColour);
             d.stroke(this.selectedColour);
        
        
             var redHex = red(this.selectedColour).toString(16);
             if(redHex.length==1)
                 {
                   redHex = "0" +redHex
                 };
             var greenHex = red(this.selectedColour).toString(16);
             if(greenHex.length==1)
                  {
                    greenHex = "0" +greenHex
                  };
             var blueHex = red(this.selectedColour).toString(16);
             if(blueHex.length==1)
                 {
                     blueHex = "0" +blueHex
                 };
        
              $("#colourInput").val("#" + redHex + greenHex + blueHex);
              }
    
    
        this.coloAlpha = function (aColor, alpha)
             {
             var c=color(aColor);
              return color('rbga(' + [red(c), green(c), blue(c), alpha].join(',' + ')'))
             }
        this.loadColours();
        $("#colourInput").change(() => { this.loadColours();});
            }

And this is the error I'm getting: colourPalette.js:8 Uncaught ReferenceError: $ is not defined

This code should return the colour selected as a result of the function. Any help is greatly appreciated.

Tej