如何将所选颜色设置为笔颜色？

Question

I'm making a pixel art painter tool in HTML and I want to add a colour picker and have it set the picked colour to the colour you're painting with.

HTML:

<label for="colorpicker">Color Picker:</label>
 <input type="color" id="colorpicker" value="#0000ff">

JS:

var penColour = 'black';
    
  function setPenColour(pen)
  {
    penColour = pen;
  }

  function setPixelColour(pixel)
  {
    pixel.style.backgroundColor = penColour;
  }

Answer 1

Just select the input in js and retrieve its value:

let penColour = 'black';
const picker = document.getElementById("colorpicker");
    
function setPenColour() {
  penColour = picker.value;
}
  
function setPixelColour(pixel) {
  pixel.style.backgroundColor = penColour;
}

See more information here

What you also may want to do is to listen to change events of the color picker to not manually update "penColour"

picker.addEventListener("change", (ev) => {
  penColour = ev.value;
})