Question

为什么当我单击具有圆形的类的div时颜色不变？另外，如何更改onclick？

var round = document.querySelector(".round");
round.addEventListener("click", function() {
  round.style.backroundColor = "blue";
});

.round {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>

Answer 1

第一个原因是您没有正确拼写backgroundColor。

但是，即使固定了该值，也只能使用第一个圆圈，因为您使用了querySelector()，它会在第一个匹配项之后停止寻找匹配项，并且仅返回该匹配项。

您可以使用querySelectorAll()，它找到所有匹配的元素并将它们作为节点列表返回。但随后，您将不得不遍历节点列表，并在每个节点上附加事件处理程序。当然可以，但是更好的方法是利用event bubbling并在更高级别上收听click。

此外，与其创建内联样式（以后很难覆盖），不如使用预先存在的CSS类，并根据需要使用element.classList应用或删除它们。下面，我将展示如何在连续的点击中打开/关闭颜色。

// Listen for clicks at a higher level that click will bubble up to
document.addEventListener("click", function(event){
  // Check to see if a "round" element was the trigger for the event
  if(event.target.classList.contains("round")){
    // Style the trigger based on adding/removing the pre-existing class
    event.target.classList.toggle("highlight")  
  }
});

.round {
   height: 25px;
   width: 25px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
 }
 
 /* This will be applied or removed as needed */
 .highlight {
   background-color:blue;
 }

<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>

Answer 2

querySelector()仅选择第一个匹配元素，您需要querySelectorAll()并返回NodeList。

由于并非所有浏览器都支持NodeList对象上的forEach()，因此您可以使用数组解构将NodeList强制转换为Array，然后使用forEach()对其进行迭代并添加事件听众：

[...document.querySelectorAll(".round")].forEach((round) => {
  round.addEventListener("click", function() {
    round.style.backgroundColor = "blue";
  })
})

.round {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>

Answer 3

主要问题是您应使用querySelectorAll()选择与.round选择器匹配的所有元素实例。

querySelectorAll()方法返回一个匹配元素的集合，您可以对其进行迭代，然后为每个元素添加click事件以执行样式/背景颜色更新：

// Use querySelectorAll to select all instances of 'round'
// as a collection
var rounds = document.querySelectorAll(".round");

// Iterate each element
for(const round of rounds) {

  // Attach click event to each element instance
  round.addEventListener("click",function(event){
     
    // Use element from event, fix typo "backgroundColor"
    event.currentTarget.style.backgroundColor ="blue";  
  });
}

.round {
   height: 25px;
   width: 25px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
 }

<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>

Answer 4

使用querySelectorAll并使用backgroundColor修正拼写错误

let round = document.querySelectorAll('.round');
for (let element of round) {
  element.addEventListener('click', () => {
    element.style.backgroundColor = 'red'
  })
}

Answer 5

您可以尝试以下方法。也可以查看我的评论：

//Use querySelectorAll to return a NodeList of all items matching the query
var rounds = document.querySelectorAll(".round");

//Iterate over each item
Array.prototype.forEach.call(rounds, function(round) {
  //Add an event listener
  round.addEventListener('click', onRoundClick("blue"));
});

function onRoundClick(color) {
  //Return a handler that changes the bg color of calling object
  return function() {
    this.style.backgroundColor = color;
  }
}

.round {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>

Answer 6

var round = document.querySelectorAll('.round');
document.addEventListener('click', function() {
  for (var i = 0;i < round.length;i++) {
    round[i].style.backgroundColor="blue";
  };
};

您没有正确拼写“背景”。

如何使用addEventListener更改div的颜色

6 个答案: