Vanilla Javascript: How to make cells multiple different colours on a grid with user colour input

Question

What I'm building

Hi guys! I'm building a Pixel Art Maker.

It's basically a grid, and each cell on the grid changes colour when you click on it.

It's an application that should allow for different colours on the same canvas.

Problem:

How do I allow for multiple different colours on the same grid, with user-selected color input?

I know how to make it all black, for example (it's hardcoded at the moment), but if I wanted to add more colours, how do I do that?

JS Fiddle Demo

https://jsfiddle.net/JayS5/foznjb2m/

JS Code

const canvas = document.querySelector('#pixelCanvas')

const tbody = document.createElement('tbody');

canvas.addEventListener('click', function(e){
  e.target.style.background = 'black';
});

canvas.addEventListener('dblclick', function(e){
  e.target.style.backgroundColor = 'white';
});

// Store the value of columns
const column = document.getElementById('column');

// Store the value of rows
const row = document.getElementById('row');

// Access forms
const submitForm = document.querySelector('#submitForm');

submitForm.addEventListener('submit', function(e){
  e.preventDefault();  // Prevents the submit button from refreshing the page by default
  tbody.innerHTML = "";

  // Color picker

  const colorPicker = document.createElement('div');
  colorPicker.setAttribute("id", "ActiveColor")

  colorPicker.innerHTML = '<input type="color" id="head" name="color" value="#e66465"/>';

  document.body.appendChild(colorPicker);

  // Generate grid

  for (r = 0; r < row.value; r++) {
    const tr = document.createElement('tr');
    tbody.appendChild(tr);
    for (c = 0; c < column.value; c++) {
      const td = document.createElement('td');
      tr.appendChild(td);
    } 
    canvas.appendChild(tbody);  
  }
});

Answer 1

It would probably be better to put the color picker input element into the HTML at the beginning, so that you can select it on the top level without reassignment. When the form is submitted, make it visible. Then, on click, just access that element's value and assign it to the background property:

const colorInput = document.querySelector('input[type="color"]');
canvas.addEventListener('click', function(e) {
  e.target.style.background = colorInput.value;
});

 const canvas = document.querySelector('#pixelCanvas') const tbody = document.createElement('tbody'); const colorInput = document.querySelector('input[type="color"]'); canvas.addEventListener('click', function(e) { e.target.style.background = colorInput.value; }); canvas.addEventListener('dblclick', function(e) { e.target.style.backgroundColor = 'white'; }); const column = document.getElementById('column'); const row = document.getElementById('row'); const submitForm = document.querySelector('#submitForm'); submitForm.addEventListener('submit', function(e) { e.preventDefault(); // Prevents the submit button from refreshing the page by default colorInput.style.display = 'inline'; tbody.innerHTML = ""; // Generate grid for (r = 0; r < row.value; r++) { const tr = document.createElement('tr'); tbody.appendChild(tr); for (c = 0; c < column.value; c++) { const td = document.createElement('td'); tr.appendChild(td); } canvas.appendChild(tbody); } }); 

 /** * index.scss * - Add any styles you want here! */ body { background: #f5f5f5; } table, thead, tbody, tfoot, tr, td { border-collapse: collapse; border: 3px solid black; } td { width: 30px; } tr { height: 30px; } input[type="color"] { display: none; } 

 <h1> Pixel Art Maker</h1> <fieldset> <legend>Grid Size</legend> <form id='submitForm'> <label for="height">Columns:</label> <input type="number" id="column" placeholder="Key in an integer" step="1" /> <label for="width">Rows:</label> <input type="number" id="row" placeholder="Min: 1, max: 100" min="1" max="100" /> <div> <input type="submit" id="submit" value="Submit" /> </div> </form> </fieldset> <br> <br> <div> <table id="pixelCanvas"> <!-- Dynamic pixel canvas --> </table> </div> <div> <input type="color" value="#e66465" /> </div> 

Answer 2

You can add event onchange and write color to global varible color

  colorPicker.onchange = function (e) {
    color = e.target.value
  }

Full code