Я не могу записывать в консоль вывод последнего блока? почему это происходит? - PullRequest
Новая
       68

Я не могу записывать в консоль вывод последнего блока? почему это происходит?

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

Я написал код, чтобы рекурсивно мигать блоками и консоль регистрировала имя блока в то время, когда я нажимаю любую клавишу. За исключением последнего ключа, каждый блок печатается в консоли, а также я хочу запустить функцию, которая отображает круг в документе с текстом в консоли и заставляет кнопки исчезать, пока отображается круг. как я могу это сделать? ( LMNO не печатает в консоли ) 

let curr_div_on = 0,curr_div_off = 0;


const key = document.getElementsByClassName("key");


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){
  console.log('ABCD');
  }else if(curr_div_on==2){
    console.log('EFGH');
  }else if(curr_div_on==3){
    console.log('IJKL');
  }else if(curr_div_on==4){
    console.log('LMNO');
  }
})
.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'>
    <button class='key'>ABCD</button>
    <button class='key'>EFGH</button>
    <button class='key'>IJKL</button>
    <button class='key'>LMNO</button>
  </div>
</html>

1 Ответ

1 голос
/ 05 августа 2020

У вас не может быть более одного элемента с ОДНИМ идентификатором, идентификаторы должны быть уникальными. Вместо этого вы можете использовать класс. 

let curr_div_on = 0,curr_div_off = 0;


const key = document.getElementsByClassName("key");


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);
.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'>A</div>
    <div class='key'>B</div>
    <div class='key'>C</div>
    <div class='key'>D</div>
  </div>
</html>
...