点击更改颜色答案

【问题标题】：Click change color点击更改颜色
【发布时间】：2021-10-08 18:57:17
【问题描述】：

我正在开发一个网站，我希望当用户点击特定卡片时，它会变成蓝色。我在网上搜索并找到了一些东西，但它对我不起作用，我不知道为什么；这是代码：

<div class="card" onclick="myFunction()">
  <p class="number-card">1</p>
</div>

<script>
  function myFunction() {
    document.getElementById("card").style.backgroundcolor = "blue";
  }
</script>

【问题讨论】：

错字。应该是backgroundColor
您没有 ID 为 card 的元素。
也不要使用onclick，而是使用addeventListener
另外，你错过了使用类，而不是 ID。使用 querySelectorAll 而不是 getElementById - 如果您有更多卡片，请使用 .forEach 为每个元素分配事件侦听器。
如何使用 .forEach？

标签： javascript html colors

【解决方案1】：

你缺少一个 ID - 无论如何，使用 Classes 而不是 document.querySelectorAll(".card") MDN querySelectorAll
应该是backgroundColor，大写C
使用Element.addEventListener() 代替内联JS on* 属性处理程序。 JS 和样式应始终位于各自的标签或文件中，而不是散布在 HTML 文件周围。
阅读Event.currentTarget

<div class="card">
  <p class="number-card">1</p>
</div>

<div class="card">
  <p class="number-card">2</p>
</div>

<script>
  const changeBgColor = (ev) => {
    ev.currentTarget.style.backgroundColor = "blue";
  };
  const EL_cards = document.querySelectorAll(".card");
  EL_cards.forEach(EL => EL.addEventListener("click", changeBgColor));
</script>

或者，使用常规函数（其中 addEventListener 默认绑定 this 到 Event.currentTarget 元素）：

function changeBgColor() {
  this.style.backgroundColor = "blue";
}

【讨论】：

.eventTarget 仅与箭头功能相关（这不是必需的或没有任何帮助，因为它“阻止”了this）。没有它this 将是.card，因此您可以使用this.style.backgroundColor = ...
@Andreas 在我之前的编辑中。我故意把它改成了箭头函数。
然后请提及“目的”，以便 OP 和未来的读者可以使用它。否则，您的回答只会引入一个未提及且（恕我直言）不必要的更改，因此需要另一个概念才能使其发挥作用。
@Andreas ...答案都在 - 只需深入了解即可。

【解决方案2】：

您只将类设置为 card，但您正在尝试 getElementById，您应该给 div 一个唯一的 id 并更改功能。

【讨论】：

谢谢，我是 js 新手，我以为类是 id :)