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

Question

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

我尝试在 CSS 中将这些 div 设置为 display:none，然后在 Javascript 中使用 x.style.display = 'block' 使它们可见:

let firstGoChosen = 0;

function hideShow() {
  let div1 = document.getElementById('divvy1');
  let div2 = document.getElementById('divvy2');
  if (firstGoChosen === 1) {
    div1.style.display = 'block';
    div2.style.display = 'block';
  }
}

onclick事件调用的函数设置firstGoChosen = 1

我也尝试过使用 visibility:hidden，但到目前为止都没有用。

我只为此使用纯 JS，因为我还没有学习 jQuery。 Here's the JSfiddle对于任何感到勇敢的人......

Answer 1

您正在尝试使用 css 类名作为 id，这是行不通的。你可以通过添加一个 id 来解决这个问题

<div class="divvy1" id="divvy1">

并继续使用getElementById()或者你可以考虑使用 getElementsByClassName() 其功能略有不同，但看起来更符合您要完成的目标。