堆棧內存溢出
  簡體   English   中英

觸發更改背景顏色的 Keydown 事件

[英]Keydown event triggering a change background color

 原文  2021-04-12 14:10:27  2   2    javascript/ html/ css

問題描述

我用HTML 、 CSS和JS創建了一個相對簡單的鋼琴。 當使用addEventListener 、 new Audio和audio.play()按下正確的鍵時，它會成功輸出聲音。

我沒有成功添加最后的觸摸，即用戶按下正確的鍵之一，這樣做除了輸出聲音外還應該改變背景顏色。

我嘗試在If和else if語句的addEventListener function 中使用以下代碼：

let whiteKeyList = ['A', 'S', 'D', 'F', 'G', 'H', 'J'];
let blackKeyList = ['W', 'E', 'T', 'Y', 'U'];


document.addEventListener("keydown", function(event){
    if(whiteKeyList.includes(event.key.toUpperCase())) {
        document.getElementById(`#${event.key.toUpperCase()}`).style.backgroundColor = "pink";
        console.log(`The '${event.key.toUpperCase()}' key is pressed.`);
        let audio = new Audio(`white_keys/${event.key.toUpperCase()}.mp3`);
        audio.play();
    } else if (blackKeyList.includes(event.key.toUpperCase())) {
        document.getElementById(`#${event.key.toUpperCase()}`).style.backgroundColor = "pink";
        console.log(`The '${event.key.toUpperCase()}' key is pressed.`);
        let audio = new Audio(`black_keys/${event.key.toUpperCase()}.mp3`);
        audio.play();
    } else {
        console.warn("Piano key not found. Please try again.");
    }
});

在我撥入功能之前， pink只是一個占位符。我計划將其更改為與配色方案一致。 

 let whiteKeyList = ['A', 'S', 'D', 'F', 'G', 'H', 'J']; let blackKeyList = ['W', 'E', 'T', 'Y', 'U']; document.addEventListener("keydown", function(event){ if(whiteKeyList.includes(event.key.toUpperCase())) { console.log(`The '${event.key.toUpperCase()}' key is pressed.`); let audio = new Audio(`white_keys/${event.key.toUpperCase()}.mp3`); audio.play(); } else if (blackKeyList.includes(event.key.toUpperCase())) { console.log(`The '${event.key.toUpperCase()}' key is pressed.`); let audio = new Audio(`black_keys/${event.key.toUpperCase()}.mp3`); audio.play(); } else { console.warn("Piano key not found. Please try again."); } });
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); body { background: #F6BD60; }.container { margin: 230px auto; height: 70px; width: max-content; padding-top: 150px; text-align: center; }.white-keys kbd { font-family: "Roboto", sans-serif; display: inline-block; height: 60px; width: 50px; padding-top: 120px; margin-right: -6px; background-color: white; border: 4px solid black; }.black-keys kbd { font-family: "Roboto", sans-serif; font-size: 13px; position: relative; display: inline-block; height: 40px; width: 30px; top: -125px; padding-top: 61px; margin-top: -300px; background-color: black; border: 3px solid black; color: white; }.white-keys kbd:hover { background-color: antiquewhite; }.black-keys kbd:hover { background-color: antiquewhite; color: black; }.black-keys #W { right: 57px; }.black-keys #E { right: 40px; }.black-keys #T { left: 31px; }.black-keys #Y { left: 47px; }.black-keys #U { left: 64px; }
 <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Virtual Piano</title> </head> <body> <div class="container"> <div class="white-keys"> <kbd class="key" id="A">A</kbd> <kbd class="key" id="S">S</kbd> <kbd class="key" id="D">D</kbd> <kbd class="key" id="F">F</kbd> <kbd class="key" id="G">G</kbd> <kbd class="key" id="H">H</kbd> <kbd class="key" id="J">J</kbd> </div> <div class="black-keys"> <kbd class="key" id="W">W</kbd> <kbd class="key" id="E">E</kbd> <kbd class="key" id="T">T</kbd> <kbd class="key" id="Y">Y</kbd> <kbd class="key" id="U">U</kbd> </div> </div> <script src="script.js"></script> </body> </html>

2 個解決方案

解決方案1
 2  2021-04-12 15:30:13

您應該從 GetElementById 調用中刪除 #。

嘗試改變這個

document.getElementById(`#${event.key.toUpperCase()}`).style.backgroundColor = "pink";

至

document.getElementById(`${event.key.toUpperCase()}`).style.backgroundColor = "pink";

這背后的原因是 id 不以井號 (#) 開頭（但 id 的選擇器卻可以）。 因此，如果您使用 querySelector，您應該包含井號，而在使用 getElementById 時，您應該刪除它。

解決方案2
 1 已采納  2021-04-12 14:51:18

試試下面的。 使用 css class 調用，然后 js 超時 function 在一段時間后將其刪除（當前為 500） 

 let whiteKeys = getValues('.white-keys > kbd'); let blackKeys = getValues('.black-keys > kbd'); document.addEventListener("keydown", function(event){ const k = event.key.toUpperCase(), el = document.getElementById(k); let audio, timeout; console.log(`The '${k}' key is pressed.`); clearTimeout(timeout); if(whiteKeys.indexOf(k) > -1) { el.classList.add('pressed'); timeout = setTimeout(function () { el.classList.remove('pressed'); }, 100); audio = new Audio(`white_keys/${k}.mp3`); audio.play(); } else if (blackKeys.indexOf(k) > -1) { el.classList.add('pressed'); timeout = setTimeout(function () { el.classList.remove('pressed'); }, 100); audio = new Audio(`black_keys/${event.key.toUpperCase()}.mp3`); audio.play(); } else { console.warn("Piano key not found. Please try again."); } }); function getValues(sel) { return Array.prototype.slice.call(document.querySelectorAll(sel)).map(function (k) { return k.innerText; }); }
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); body { background: #F6BD60; }.container { margin: 230px auto; height: 70px; width: max-content; padding-top: 150px; text-align: center; }.white-keys kbd { font-family: "Roboto", sans-serif; display: inline-block; height: 60px; width: 50px; padding-top: 120px; margin-right: -6px; background-color: white; border: 4px solid black; }.black-keys kbd { font-family: "Roboto", sans-serif; font-size: 13px; position: relative; display: inline-block; height: 40px; width: 30px; top: -125px; padding-top: 61px; margin-top: -300px; background-color: black; border: 3px solid black; color: white; }.white-keys kbd:hover { background-color: antiquewhite; cursor: pointer; }.black-keys kbd:hover { background-color: antiquewhite; color: black; cursor: pointer; }.black-keys #W { right: 57px; }.black-keys #E { right: 40px; }.black-keys #T { left: 31px; }.black-keys #Y { left: 47px; }.black-keys #U { left: 64px; } kbd.pressed { background-color: pink; }
 <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Virtual Piano</title> </head> <body> <div class="container"> <div class="white-keys"> <kbd class="key" id="A">A</kbd> <kbd class="key" id="S">S</kbd> <kbd class="key" id="D">D</kbd> <kbd class="key" id="F">F</kbd> <kbd class="key" id="G">G</kbd> <kbd class="key" id="H">H</kbd> <kbd class="key" id="J">J</kbd> </div> <div class="black-keys"> <kbd class="key" id="W">W</kbd> <kbd class="key" id="E">E</kbd> <kbd class="key" id="T">T</kbd> <kbd class="key" id="Y">Y</kbd> <kbd class="key" id="U">U</kbd> </div> </div> <script src="script.js"></script> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 觸發沒有響應的JQuery keydown事件 JavaScript keydown 事件未通過 setTimeout 觸發 更改keydown事件的背景 在vanilla Javascript中以編程方式觸發keydown事件 通過jQuery keydown，Keyup更改顏色 防止更改其他事件 點擊事件時更改div背景顏色 jQuery事件更改圖像上的嵌入式背景顏色 在全日歷中單擊更改事件的背景顏色 延遲事件，例如更改 div 的背景顏色
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM