背景顏色不會隨着Javascript改變嗎？

Question

我正在嘗試使用forEach循環來遍歷整個網格，並在單擊時更改框的顏色。 但是由於某種原因，其他所有CSS樣式都可以使用backgroundcolor。

• 我嘗試重做我的代碼以及使用for循環，但是它也不起作用。

這是我的代碼筆和我的代碼： https ://codepen.io/Fairy121/pen/dBGYRQ

 var sqrs = document.querySelectorAll('.sqr'); function changeCol(event) { console.log(event.target); event.target.classList.toggle('my_choice'); } sqrs.forEach(sqr => sqr.addEventListener('click', changeCol)); 

 .my_choice { border: 3px solid black; color: white; background-color: green; } 

 <div class='sqr-grid'> <div class='sqr'>0</div> <div class='sqr'>1</div> <div class='sqr'>2</div> <div class='sqr'>3</div> <div class='sqr'>4</div> <div class='sqr'>5</div> <div class='sqr'>6</div> <div class='sqr'>7</div> <div class='sqr'>8</div> </div> 

Answer 1

簡單的解決方案：

var sqrs = document.querySelectorAll('.sqr');
sqrs.forEach(sqr => {

  sqr.addEventListener('click', function(){sqr.classList.toggle('my_choice'); });
});

注意：-在此鏈接中.my_choice樣式為空，因此添加background:green並同時刪除.one

Answer 2

您在代碼筆上的CSS代碼中存在問題：

 .one .my_choice{ } 

實際上，您只能使用一個事件偵聽器並檢查事件目標以動態切換my_choice css類以獲取任何帶有sqr css類的元素。

 document.querySelector('.sqr-grid').addEventListener('click', function(event) { var target = event.target; if (target.classList.contains('sqr')) { target.classList.toggle('my_choice'); } }); 

請看一下演示 。

Answer 3

您需要設置class屬性

var sqrs = document.querySelectorAll('.sqr');

function changeCol(event) {
 console.log(event.target);
  event.target.setAttribute('class','my_choice');
}

sqrs.forEach(sqr => {
  sqr.addEventListener('click',changeCol);
});