Как использовать getElementsByClassName () для добавления обеих сеток и отображения одной за другой? - PullRequest
Новая
       104

Как использовать getElementsByClassName () для добавления обеих сеток и отображения одной за другой?

0 голосов
/ 06 августа 2020
  1. Я пытался добавить сетку-2, когда мы нажимаем клавишу, но она работает не так, как я ожидал.
  2. Когда отображается сетка-2, я хочу, чтобы сетка исчезла (я не 'не знаю, как это сделать).

(фон): - Я искал и обнаружил, что в CSS есть свойство видимости, но не знаю, как применить ко всей сетке и отмените свойство видимости и сделайте их видимыми.

Я пытался добавить сетку-2 с помощью getElementById, но обе сетки появляются одновременно. (не знаю, как заставить их появляться один за другим). 

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>

1 Ответ

0 голосов
/ 06 августа 2020

Я думаю, что код неправильный в этих двух пунктах:

  • const key = document.getElementsByClassName ('keys'); -> Селектор должен быть 'key'
  • var element = document.getElementsByClassName ("grid-2"); -> Результатом является список (DomTokenList), поэтому вы должны взять первый элемент (var element = document.getElementsByClassName ("grid-2") [0];)
...