Показать и скрыть div с помощью клавиш клавиатуры

Question

Мне нужно изменить отображение div при условии, что отображение определенного div! = None при каждом нажатии определенной клавиши

, например: если Div1 display = block и пользователь нажал F7 - затем измените стиль Div1 на none, а Div2 на block

Я понял, как это сделать, но после добавления дополнительных условий некоторые из них просто пропускаются, и я не могу понять, почему .. Так Я, очевидно, не нашел лучшего способа сделать это

[каждый раз, когда нажимаются определенные клавиши, другие div не должны отображаться ни один, и другие блоки отображения]

Я надеюсь, что вы можете помочь мне!

* edit: Добавление моей недавней попытки:

if ((document.getElementById("main60_1").style.display != "none") && (hello == 1 ) && (y == 117)) {
        for (var i = 0; i < mains.length; i += 1) {
            mains[i].style.display = 'none'; /* used to hide all the divs with this class*/
        }
        for (var i = 0; i < columns.length; i += 1) {
            columns[i].style.display = 'none'; /* used to hide all the divs with this class*/
        }
        for (var i = 0; i < tks.length; i += 1) {
            tks[i].style.display = 'none'; /* used to hide all the divs with this class*/
        }
        for (var i = 0; i < f9s.length; i += 1) {
            f9s[i].style.display = 'none'; /* used to hide all the divs with this class*/
        }
        document.getElementById("column1_60").style.display = "table";
        document.getElementById("bottom_menu1").style.display = "none";
        document.getElementById("bottom_menu2").style.display = "block";
        console.log('Hi! Im column1_60');   
        y = null; /* I set y back to null each time so there wont be a chain reaction to the same key pressed */
    }

hello - переменная для моего ввода, а y - переменная для кода ключа.

Здесь мне нужно чтобы показать «column1_60» и скрыть «main60_1», при условии, что «main60_1» отображается, входное значение равно 1, и пользователь нажал F7

Остальная часть кода выглядит примерно так же

Answer 1

Может быть, это поможет вам.

window.onkeydown = evt => {
  switch (evt.keyCode) {
    //u
    case 117:
      if (main60_1.classList.contains('none') && hello == 1) {
        const elementsToHide = document.querySelectorAll("mains, div.alertcolumns, tks, f9s");
        Array.from(elementsToHide).forEach((el) => {
          el.classList.add('none');
        });
        bottom_menu1.classList.add('none');
        bottom_menu2.classList.add('block');
        column1_60.classList.add('table');
      }
      break;
    //v
    case 118:
      if (!main60_1.classList.contains('none') && hello == 1) {
        const elementsToHide = document.querySelectorAll("mains, div.alertcolumns, tks, f9s");
        Array.from(elementsToHide).forEach((el) => {
        el.classList.remove('none');
      });
      bottom_menu1.classList.remove('none');
      bottom_menu2.classList.remove('block');
      column1_60.classList.remove('table');
    }
    break;
  }
};