Активировать эффект кнопки onclick css с помощью js
Я делаю приложение для пианино, используя vanilla JS, и оно позволяет нажимать клавиши пианино с помощью клавиатуры. Так что всякий раз, когда нажимаются определенные клавиши на клавиатуре, будет нажиматься соответствующая кнопка. Но я также хочу, чтобы эффект css при нажатии кнопки активировался.
Мне удалось заставить клавиши клавиатуры работать с помощью метода .click(), но это не активирует эффект нажатия кнопки css. Есть ли способ сделать это?
Это то, что у меня есть до сих пор.
document.addEventListener('keydown', (event) => {
if (event.repeat) return
switch (event.key) {
case "a":
document.getElementById("c4").click();
break
// then a bunch more cases for the rest of the keys
Я добавил некоторую информацию в свой ответ
![Интервьюер: Почему '[] instanceof Object' возвращает "true"?](https://cdn-images-1.medium.com/max/120/0*3Q2LAQJh9HQrdTPK)
Ответы 2
Ты можешь сделать
const a = document.getElementById("c4")
document.addEventListener('keydown', (event) => {
switch (event.key)
case "a":
a.click();
a.classList.add("down")
И удалить класс на keyUp
Чтобы сэкономить ваше время, возможно, вы можете использовать этот codepen, который я взял, чтобы добавить к нему JS.
Https://codepen.io/mplungjan/pen/dyjLKYJ
Я добавил к нему события клавиатуры, но псевдокласс :active не срабатывает при нажатии.
Более простая альтернатива (мне не нравится переключатель):
Дайте каждому элементу заметки class="note"
<button type = "button" class = "note">A</button>
<button type = "button" class = "note">B</button>
<button type = "button" class = "note">C</button>
Тогда есть
const notes = [...document.querySelectorAll(".note")].reduce((acc,cur) => {
acc[cur.textContent.toLowerCase()] = cur;
return acc
},{})
const validKeys = "abcdefg";
document.addEventListener('keydown', (event) => {
const key = event.key;
if (!validKeys.includes(key)) return;
const note = notes[key];
note.click();
note.classList.add("down")
});
Чтобы активировать эффект CSS при нажатии кнопки, вы можете вручную добавить и удалить класс CSS, соответствующий эффекту клика.
Вы можете реализовать это в своем коде:
document.addEventListener('keydown', (event) => {
if (event.repeat) return
switch (event.key) {
case "a":
let c4 = document.getElementById("c4");
c4.classList.add("clicked");
setTimeout(() => {
c4.classList.remove("clicked");
}, 100);
break
}
});
Пожалуйста, прочтите Как спросить ; в частности, часть о предоставлении минимального воспроизводимого примера