javascript - 控制台抛出语法“未捕获的类型错误：note.addEventListener 不是函数”？

Question

我想做一个钢琴键手。我已经成功完成了 html 和 css 编码，但是在 javascript 中我遇到了许多我实际上不知道的问题。

在浏览器控制台中抛出这些语法：

Uncaught TypeError: note.addEventListener is not a function;

Reference Error: notes is not defined;

    
    const keys = ['c-key', 'd-key', 'e-key', 'f-key', 'g-key', 'a-key', 'b-key', 'c2-key', 'c-sharp-key', 'd-sharp-key', 'f-sharp-key', 'g-sharp-key', 'a-sharp-key'];
        const notes = [];
        //for each loop to take the target dom
        keys.forEach(function(key) {
            notes.push(document.getElementsByClassName(key))
        });
        
        //named function that change the color of the target key
        const keyColor = function(event) {
            event.target.style.color = 'green';
        };
        const keyReturn = function(event) {
                event.target.style.color = '';
            }
            //function handler event listener;
        const eventAssignment = function(note) {
            note.addEventListener('mousedown', keyColor);
        
            note.addEventListener('mouseup', keyReturn);
        };
        //run array element through for each loop
        notes.forEach(eventAssignment);

我在jsbin中的文件在这里

标签： javascript