如何使用 getElementsByClassName() 添加两个网格并一个接一个地显示？答案

【问题标题】：How to use getElementsByClassName() for adding both grids and display one after another?如何使用 getElementsByClassName() 添加两个网格并一个接一个地显示？
【发布时间】：2020-11-26 19:26:10
【问题描述】：

我已尝试在我们按下某个键时添加 grid-2，但它没有按预期工作。
当它显示 grid-2 时，我希望网格消失（我不知道该怎么做）。

（背景）：- 我搜了一下，发现CSS中有一个可见性属性，但是不知道如何应用到整个网格并撤消可见性属性并使它们可见。

我尝试通过 getElementById 添加 grid-2，但两个网格同时出现。（不知道如何让它们一个接一个出现）。

let curr_div_on = 0,curr_div_off = 0;


const key = document.getElementsByClassName('keys');


function setPlayingOn() {
  key[curr_div_on % 4].classList.add("playing");
  curr_div_on = (curr_div_on + 1) % 4; 
}

function setPlayingOff() {
  key[curr_div_off % 4].classList.remove("playing");
  curr_div_off = (curr_div_off + 1) % 4;
}

setInterval(setPlayingOn, 500);
setTimeout(() => setInterval(setPlayingOff, 500), 500);

document.addEventListener('keypress', function(){
  if(curr_div_on ==1){
    var element = document.getElementsByClassName("grid-2");
    element.classList.add("grid");
      }
  
})

.grid{
  display: grid;
  grid-template-columns: auto auto;
  grid-gap:10px;
  
}

.key{
  padding: 20px;
  border: 1px solid;
  background-color: #2196F3;
  text-align:center;
}

.playing{
  transform: scale(1,1);
    border-color: #ffc600;
    box-shadow: 0 0 1rem #ffc600;
}

<html>
  <div class='grid'>
    <div class='key'>ABCD</div>
    <div class='key'>EFGH</div>
    <div class='key'>IJKL</div>
    <div class='key'>LMNO</div>
  </div>
  
  <div class='grid-2'>
    <div class='button'>A</div>
    <div class='button'>B</div>
    <div class='button'>C</div>
    <div class='button'>D</div>
  </div>
</html>

【问题讨论】：

您的 HTML 中没有 id="..." 属性，那么您希望 getElementById() 如何工作？？
感谢您指出我的错误，但它仍然无法正常工作@NiettheDarkAbsol

标签： javascript html css dom css-transitions

【解决方案1】：

我认为代码在这两点上是错误的：

const key = document.getElementsByClassName('keys'); --> 选择器应该是'key'
var element = document.getElementsByClassName("grid-2"); --> 结果是一个列表（DomTokenList），所以应该取第一个元素（var element = document.getElementsByClassName("grid-2")[0];)

【讨论】：