Question

我正在尝试创建一个像素艺术应用。我设法根据用户的输入动态创建一个表。当我单击特定单元格时，它不会通过click事件获得分配给它的颜色 - event.target.bgcolor =“＃ff0000”; 但是，查看调试器，它显示event.target.bgcolor确实获得了颜色，需要改变什么？出于测试目的，我指定了“＃ff0000”。

var rows; //why when define as const --> get error
var columns;
var selectedColor = '#000000';
var colorPicker;
var grid;


colorPicker = document.querySelector('.colorPicker');
/*EventLstener for Color Selection */
colorPicker.addEventListener('change', function(event) {

  selectedColor = event.target.value;
  console.log(selectedColor);

})

/************************
 Create the grid function
 ************************/
function makeGrid() {

  resetGrid()

  rows = document.querySelector('.inputRow').value;
  console.log(rows);
  columns = document.querySelector('.inputCol').value;
  console.log(columns);

  grid = document.querySelector('.grid');

  for (let x = 1; x <= rows; x++) {
    let newTR = document.createElement("tr");
    newTR.className = "tr"; //assign class
    grid.appendChild(newTR);

    for (let y = 1; y <= columns; y++) {
      let newTD = document.createElement("td");
      newTD.className = "td"; //assign class
      newTR.appendChild(newTD);

      newTD.addEventListener('click', function(event) {

        console.log("cell clicked")
        // event.target.style.backgroundcolor = "#ff0000";
        event.target.bgcolor = "#ff0000";

      })
    }
  }
}


/************************** 
Set the color of a grid cell
***************************/



/**********************************
Define a function to reset the grid 
***********************************/
function resetGrid() {
  //using jQuery to reset the grid
  $('tr').remove();
  $('td').remove();
  document.querySelector('.colorPicker').value = "#000000";
}



makeGrid();
resetGrid()

body {
  /* margin: 0; */
  /* padding: 0; */
  text-align: center;
}

h1 {
  font-family: "Comic Sans MS";
  font-size: 2.8rem;
  font-weight: 4rem;
  margin-top: 1rem;
  margin-bottom: 0.2rem;
  color: slateblue;
}

td,
tr {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  /* border: 3px solid red; */
}

tr {
  height: 20px;
}

td {
  width: 20px;
}

.inputRow,
.inputCol {
  width: 60px;
  margin-right: 15px
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Pixel Art Maker</title>
  <link rel="stylesheet" href="main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


  <!-- Bootsrap Latest compiled and minified CSS -->


  <!--    To ensure proper rendering and touch zooming-->
  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>

<body>

  <h1>Pixel Art Maker</h1>

  <h2>Choose Your Grid Size</h2>

  <form class=g ridInput>
    Set Grid Rows
    <input type="number" class="inputRow" name="rows" id="#inputRow" value="0" min="1"> Set Grid Columns
    <input type="number" class="inputCol" name="columns" id="#inputCol" value="0" min="1">
    <button type="button" class="submitData" onclick="makeGrid()">Click to Generate Grid</button>
    <button type="button" class="resetGrid" onclick="resetGrid()">Click to Reset Grid</button>
  </form>

  <h3>Pick A Color</h3>
  <!-- Set the color picker -->
  <input type="color" class="colorPicker">

  <h2>Design Canvas</h2>

  <table class="grid" id="#mytable"></table>

  <script src="myscripts.js"></script>
</body>

</html>

Answer 1

您注释掉的代码非常接近，但它应该是backgroundColor（请注意首都C）。

event.target.style.backgroundColor = "#ff0000";

我投票将此视为“简单的印刷错误”。

为什么单击的单元格不能获得背景颜色？

1 个答案: