Вопрос задан
Просмотрен
24 раза
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>
задан 3 июл. 2021 в 13:49
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>
ответ дан 3 июл. 2021 в 14:07