Question

我想在点击时将框从白色更改为红色，反之亦然。麻烦一直在实现盒子的颜色。我认为我非常接近，但在某个地方我错过了一个函数或循环。

<!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
<head>
<title> Boxes </title>
<meta charset='utf-8'>
<style>

table {
 border-spacing: 6px;
 border: 1px rgb(#CCC);
 margin-top: .5in;
 margin-left: 1in;
 }

td {
 width: 40px; height: 40px; 
 border: 1px solid black;
 cursor: pointer;
 }

</style>

在每个td上，我想将背景颜色设置为白色，并添加一个单击事件处理程序以在红色和白色之间切换颜色。在创建事件处理程序时，我想使用匿名函数，在函数内部，关键字“this”指的是元素本身，因此'this.style.backgroundColor'将是元素背景颜色。我认为我正在格式化颜色要么是错的，要么是没有正确的。我不确定如何使用“this：function for that。

<script>
function colorize(el){
  var
   r = (255, 0, 0 ),
   w = (255, 255, 255 );
   if (event.onmousedown) {
    r.style.backgroundColor = "255, 0, 0" ;
   } else {
    w.style.backgroundColor = "255, 255, 255";
   }
   }

</script>
</head>
<body onload='maketable();'>
<table>
<tbody id='tb'>

<script type="text/javascript">

var rows = 16;
var cols = 16;
var table = document.createElement("table");

 table.id = "tb";

 for (var r = 0; r < rows; r++) {
  var row = document.createElement("tr");

 table.appendChild(row);

 for (var c = 0; c < cols; c++) {
  var cell = document.createElement("td");

 cell.addEventListener("onmousedown", colorize);
  row.appendChild(cell);
  }
  }

  document.body.appendChild(table);

 </script>
 </tbody>
 </table>
 </body>
 </html>

Answer 1

您已将row定义为var row = 16;，然后在您的循环中将其重新定义为var row = document.createElement("tr");

将var row = 16;更改为var rows = 16;，然后在循环创建行时，将for (var r = 0; r < row; r++) {更改为for (var r = 0; r < rows; r++) {

Re：您的点击处理程序“onmousedown”不是活动名称 - mousedown是活动名称，因此请更新您的addEventHandler以引用该活动名称 - cell.addEventListener("mousedown", colorize);

然后你可以引用函数中的event.target来获取被点击的元素，你可以切换一个简单的类来切换颜色。

function colorize(e){
  e.target.classList.toggle('red');
}

然后将background: white添加到td的CSS中，并添加一个名为.red的新类

.red {
  background: red;
}

一起......

function colorize(e){
  e.target.classList.toggle('red');
}

function maketable() {
  var rows = 16;
  var cols = 16;
  var table = document.createElement("table");

  table.id = "tb";

  for (var r = 0; r < rows; r++) {
    var row = document.createElement("tr");

    table.appendChild(row);

    for (var c = 0; c < cols; c++) {
      var cell = document.createElement("td");
      cell.addEventListener("mousedown", colorize);
      row.appendChild(cell);
    }
  }

  document.body.appendChild(table);
}

table {
 border-spacing: 6px;
 border: 1px rgb(#CCC);
 margin-top: .5in;
 margin-left: 1in;
 }

td {
 width: 40px; height: 40px; 
 border: 1px solid black;
 cursor: pointer;
  background: white;
 }
.red {
  background: red;
}

<body onload='maketable();'>

Answer 2

init:()=>{
    var table = document.createElement("table");
    for(var i=0; i < 16; i++){
        //ROWS
        var row = document.createElement("tr");
        row.addEventListener("mousedown",colorize); //WHATEVER EVENT YOU WANT
        //CELLS
        var cell = document.createElement("td");
        //APPENDING
        row.appendChild(cell);
        table.appendChild(row);
    }
    //RENDER ON PAGE
    document.body.appendChild(table);
}
//DOCUMENT LOAD RUN INIT
document.addEventListener('DOMContentLoaded',init);

使用单击事件处理程序更改元素的颜色

2 个答案: