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

我想在单击时将框从白色更改为红色，反之亦然。麻烦一直在实施箱子的颜色。我觉得我非常接近，但是我错过了一个函数或循环。使用点击事件处理程序更改元素的颜色

<!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我想设置背景颜色为白色，并添加一个Click事件处理程序切换红色和白色之间的颜色。创建事件处理函数时，我想使用匿名函数，在函数内部关键字“this”指向元素本身，所以'this.style.backgroundColor'将是元素的背景颜色。在这里我想我正在格式化颜色无论错误还是不正确。我不确定如何使用“这样的：函数，该函数

<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>

来源

2017-04-11 HTMLnoobcs17001

你的'maketable'函数在哪里？ –

我不确定如何使用该功能。 – HTMLnoobcs17001

然后你在你的循环定义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++) {

回复：你的点击处理程序，“onmousedown事件”不是一个事件的名称 - mousedown是事件的名称，所以更新addEventHandler来引用 - cell.addEventListener("mousedown", colorize);

然后，您可以在函数中引用event.target以获取单击的元素，并且可以切换简单的类以切换颜色。

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

然后加入background: white到CSS的td，添加一个名为.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();'>

来源

2017-04-11 22:02:45

好赶上！谢谢！固定行数！ – HTMLnoobcs17001

@HTMLnoob哦对不起有更多的问题...只是一秒:) –

没问题或急！我感谢帮助！ – HTMLnoobcs17001

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);

来源

2017-04-11 22:29:25

我会为@Michael Coker用'e.target'和'.toggle（）'这个类使用'colorize（）'函数完全相同的东西。 –

不错的答案！您的意见非常有用！ – HTMLnoobcs17001

@HTMLnoob真棒很高兴我可以帮助！ –

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

回答

相关问题