使用點擊事件處理程序更改元素的顏色

我想在單擊時將框從白色更改爲紅色，反之亦然。麻煩一直在實施箱子的顏色。我覺得我非常接近，但是我錯過了一個函數或循環。使用點擊事件處理程序更改元素的顏色

<!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真棒很高興我可以幫助！ –

使用點擊事件處理程序更改元素的顏色

回答

相關問題