0

document.onkeypress = function(event) {
  console.log(event);
  console.log(event.keyCode);
  document.querySelector('#btn-wrapper .btn[btn="' + event.keyCode + '"]').classList.add('downKeybord');
}
.downKeybord {
  background-color: blue;
}

.btn-wrapper {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btn {
  border: none;
  border-radius: 20px;
  min-width: 120px;
  padding: 7px;
  color: #fff;
  font-size: 14px;
  background-color: #000000;
  cursor: pointer;
}

.btn:active,
.btn:focus {
  outline: none;
}
<div class="btn-wrapper">
  <button class="btn">Enter</button>
  <button class="btn">S</button>
  <button class="btn">E</button>
  <button class="btn">O</button>
  <button class="btn">N</button>
  <button class="btn">L</button>
  <button class="btn">Z</button>
</div>

1 ответ 1

0

document.onkeypress = function(event) {
  const key = event.key.toLowerCase();
  const buttons = document.querySelectorAll(".btn-wrapper > .btn");
  for (let btn of buttons) {
    if (btn.innerText.toLowerCase() === key) btn.classList.add("downKeybord")
    else btn.classList.remove("downKeybord");
  }
}
.btn-wrapper {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btn {
  border: none;
  border-radius: 20px;
  min-width: 120px;
  padding: 7px;
  color: #fff;
  font-size: 14px;
  background-color: #000000;
  cursor: pointer;
}

.btn:active,
.btn:focus {
  outline: none;
}

.downKeybord {
  background-color: blue;
}
<div class="btn-wrapper">
  <button class="btn">Enter</button>
  <button class="btn">S</button>
  <button class="btn">E</button>
  <button class="btn">O</button>
  <button class="btn">N</button>
  <button class="btn">L</button>
  <button class="btn">Z</button>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.