Color Generator 的 JavaScript 源代码不工作

Question

我用 JavaScript、Html 和 CSS 编写了一个调色板生成器。我使调色板生成器实际生成调色板的 JavaScript 源代码不起作用。

https://github.com/tzanders711/Color-Palette-Generator-/blob/bff2810d1315442cfb52992b4ccedc2e748ab46e/myscripts.js

const colorCard = document.querySelectorAll(".colorCards1", ".colorCards2", ".colorCards3", ".colorCards4", ".colorCards5");

const buttonElement = document.getElementById("btn");

document.addEventListener('keydown', e => {

 if (e.key === ' ') {

  generatePalette();

}

document.getElementById("btn").addEventListener("点击", generatePalette);

 function generatePalette() {

colorCard.forEach(colorCard => {

   const newColor = generatePalette();

   });

   

    colorCard.querySelector(".colorCards1", ".colorCards2", ".colorCards3", ".colorCards4", ".colorCards5").style.background = newColor;

    colorCard.querySelector("p").innerText = newColor;

}

});

   function generatePalette() {

    const letters = ['0','1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];

    

    let color = '#';

   

    for (let i = 0; i < 6; i++) {

        color += letters[Math.floor(Math.random() * 16)];

      }

      

      return color;

   }

我将我的 JavaScript 代码移到了代码的底部，就在标签上方，并向我的 JavaScript 开始标签添加了一个异步属性，这样我的 html 文档将在我的 JavaScript 代码之前加载。

我没有收到任何类型的语法错误。我只能猜测代码有问题，因为我所拥有的不起作用。