在盒子里着色

Question

我正在尝试创建一个由彩色框组成的二维数组，但我得到的只是每个框中的十进制数字。

let adjustSize = document.getElementById("dimension");
adjustSize.addEventListener("change", function () {
  let size = parseInt(adjustSize.value);
  // fullTable.innerHTML = "";
  var array = [];
  for (let i = 0; i < size; i++) {
    array[i] = [];
    for (let j = 0; j < size; j++) {
      array[i][j] = Math.random();
      if (Math.random() < 0.5) {
        array[i][j].className = document.getElementsByClassName("popXColor");
      } else {
        array[i][j].className = document.getElementsByClassName("popYColor");
      }
    }
  }
  drawTable(array);
});
function drawTable(array) {
  let t = document.createElement("table");
  let div = document.querySelector("#board");
  div.appendChild(t);
  for (let i = 0; i < array.length; i++) {
    let tr = document.createElement("tr");
    for (let j = 0; j < array.length; j++) {
      let td = document.createElement("td");
      td.innerHTML = array[i][j];
      tr.appendChild(td);
    }
    t.appendChild(tr);
  }
  return t;
}

我尝试为这些框使用以下 HTML 属性：

        <tr>
          <td class="field"><label for="popXcolor">Population 1:</label></td>
          <td class="field">
            <input id="popXcolor" type="color" value="#006EFF" />
          </td>
        </tr>
        <tr>
          <td class="field"><label for="popYcolor">Population 2:</label></td>
          <td class="field">
            <input id="popYcolor" type="color" value="#FF7B00" />
          </td>
        </tr>

如果您知道解决方案，那将很有帮助。

Answer 1

我假设你想要这样的东西，对吗？

如果是这样，那么您离您想要实现的目标并不太远。需要调整的第一部分是将#popXcolor 或#popYcolor 的颜色值存储到数组中。如果您随机选择一种颜色或另一种颜色，则添加颜色输入的值将适用于此步骤。

if (Math.random() < 0.5) {
  array[i][j] = document.getElementById("popXcolor").value;
} else {
  array[i][j] = document.getElementById("popYcolor").value;
}

一旦你有了它，你只需要将颜色添加到适当的样式中（我在我的示例中使用了backgroundColor，有关更多详细信息，请参阅styles）：

td.style.backgroundColor = array[i][j];

在我的完整示例中，我做了一些更改以帮助我理解和回答您的问题。

在开头设置引用

• 我希望能够使用 #board、#popXcolor 和 #popYcolor 元素，而无需在函数和循环中调用 DOM，因此我在代码开头创建了对每个元素的引用。
• 为了减少额外的 DOM 调用，我在开始时创建了空的 table、tr 和 td 元素，并在 drawTable 函数中调用 .cloneNode()。

提取函数

• 我在adjustSize 元素上提取了change 的事件侦听器的实现细节，并将其放入一个名为changeSquares 的函数中。
• 我希望能够在代码运行/加载时调用该函数，因此为此创建一个专用函数使这非常容易实现。

变量声明更改

• 我将size 变量更改为length，以便能够在Array.from() 方法中轻松使用它。
• 为了清楚起见，我将array 的名称修改为arrayOfColors。
• 由于我使用Array.from() 创建数组，我可以在mapFn 值启动器中创建颜色，因此删除了for 循环。
• 使用Conditional (ternary) operator，我可以进一步减少代码并删除if..else 块。
• 如果值需要更改，大部分var 变量声明已更改为let，否则更改为const。

const adjustSize = document.getElementById("dimension");
const board = document.getElementById("board");
const popXcolor = document.getElementById("popXcolor");
const popYcolor = document.getElementById("popYcolor");
const tableElement = document.createElement("table");
const tableRowElement = document.createElement("tr");
const tableCellElement = document.createElement("td");

const drawTable = (array) => {
  board.innerHTML = "";
  const t = tableElement.cloneNode();
  board.appendChild(t);
  for (let i = 0; i < array.length; i++) {
    const tr = tableRowElement.cloneNode();
    for (let j = 0; j < array.length; j++) {
      const td = tableCellElement.cloneNode();
      td.style.backgroundColor = array[i][j];
      tr.appendChild(td);
    }
    t.appendChild(tr);
  }
};

const changeSquares = () => {
  const length = parseInt(adjustSize.value);
  const arrayOfColors = Array.from({
    length
  }, () => {
    return Array.from({
      length
    }, () => {
      return Math.random() < 0.5 ? popXcolor.value : popYcolor.value;
    });
  });
  drawTable(arrayOfColors);
};

adjustSize.addEventListener("change", changeSquares);
window.addEventListener('DOMContentLoaded', changeSquares);

table {
  border: 1px solid black;
  margin: 0.5rem 0;
}

#board td {
  width: 40px;
  height: 40px;
}

<div><label for="dimension">Number of rows and columns</label></div>
<div><input id="dimension" type="number" min="1" step="1" value="3" /></div>
<table>
  <tr>
    <td class="field"><label for="popXcolor">Population 1:</label></td>
    <td class="field">
      <input id="popXcolor" type="color" value="#006EFF" />
    </td>
  </tr>
  <tr>
    <td class="field"><label for="popYcolor">Population 2:</label></td>
    <td class="field">
      <input id="popYcolor" type="color" value="#FF7B00" />
    </td>
  </tr>
</table>
<div id="board"></div>