Vanilla Javascript：如何使用用户颜色输入在网格上制作多个不同颜色的单元格

Question

我正在建设什么

嗨，大家好！我正在建立一个Pixel Art Maker。

它基本上是一个网格，当你点击它时，网格上的每个单元格都会改变颜色。

这是一个应该允许在同一画布上使用不同颜色的应用程序。

问题：

如何在同一网格上允许多种不同的颜色，并使用用户选择的颜色输入？

我知道如何将它全部变成黑色（例如此刻它是硬编码的），但如果我想添加更多颜色，我该怎么做？

JS小提琴演示

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

JS代码

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

将颜色选择器输入元素放在开头的HTML中可能会更好，这样您就可以在顶层选择它而无需重新分配。提交表单后，将其显示为可见。然后，点击，只需访问该元素的value并将其分配给background属性：

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

您可以添加事件onchange并将颜色写入全局变量颜色

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

Full code