Javascript 尝试使用JS动态显示隐藏在样式表中的元素

我正在用JS编写一个纸牌游戏，它使用onclick事件来决定谁先走。我试图隐藏所有其他元素（包含在2个div中），直到发生这种情况

我尝试在CSS中将这些div设置为

display:none

，然后在Javascript中使用

x.style.display='block'

使它们可见：

让firstgoselected=0；
函数hideShow（）{
设div1=document.getElementById（'divvy1'）；
设div2=document.getElementById（'divvy2'）；
如果（第一次选择===1）{
div1.style.display='block'；
div2.style.display='block'；
}
}

您试图使用css类名作为id，这是不起作用的。您可以通过添加id来解决此问题

---

继续使用getElementById（），或者您可以稍微不同地研究使用哪些函数，但看起来更像是您试图实现的功能。

要获得预期的结果，请使用getElementsByClassName，就像您使用类和尝试使用document.getElementById一样

document.getElementsByClassName返回具有匹配类名的元素数组，即divvy1和divvy2，因为[0]首先选择一个元素

let div1 = document.getElementsByClassName('divvy1')[0];
let div2 = document.getElementsByClassName('divvy2')[0];

---

选项2是将类更改为ids，并使用相同的javascript代码使其工作

我很确定您可以通过以下方式轻松做到这一点：

document.querySelectorAll(‘.thoseElements:nth-child(even)’)
  .forEach(function (el) {
    el.style.display = ‘none’;
  });

---

看看javascript控制台，你有一个错误，然后看看你的元素，你没有使用id，你使用了classGood spot，非常感谢。作为后续问题，类和id使用相同的名称是要避免的吗？是的，因此您的类通常会应用于多个元素，而id只特定于一个元素