Javascript 在颜色模型之间转换

我正在尝试制作用于在颜色模型（十六进制、rgb、hsl）之间转换的按钮。 我创建了一个按钮，当点击时会生成一种随机颜色。 我创建了一个类，可以生成rgb中的随机颜色，并有方法将其转换为十六进制或hsl。 我尝试在每个颜色模型按钮上创建一个“单击”事件侦听器，但无法访问通过类（块范围）创建的新生成的颜色对象

我应该使用普通函数来转换而不是类构造函数吗

const colorName=document.querySelector（“.colorName”）；
const genColorBtn=document.querySelector（“genColorBtn”）；
const hexBtn=document.querySelector（“#hexBtn”）；
const rgbBtn=document.querySelector（“#rgbBtn”）；
const hslBtn=document.querySelector（“#hslBtn”）；
//生成随机颜色
常量genRandomColor=（）=>{
const r=Math.floor（Math.random（）*255+1）；
常数g=数学地板（数学随机（）*255+1）；
常数b=数学地板（数学随机（）*255+1）；
返回新颜色（r、g、b）；
};
genColorBtn.addEventListener（“单击”，函数（）{
const newColor=genRandomColor（）；
document.body.style.backgroundColor=newColor.rgb（）；
colorName.innerText=newColor.rgb（）；
});
//颜色模型转换
类颜色{
构造函数（r、g、b）{
这个。r=r；
这个.g=g；
这个.b=b；
这是calcHSL（）；
}
//向原型添加方法。
十六进制（）{
常数{r，g，b}=这个；
返回(
“#”+（（1您的代码似乎很好，但您的十六进制、rgb和hsl按钮没有连接。我添加了一个变量
curRGB
来存储当前的rgb值（尽管可能有一个更优雅的getter/setter可以为您的类编写）。我尝试了一下
hexBtn
侦听器：

hexBtn.addEventListener("click", function () {
    colorName.innerText = new Color(...curRGB).hex();
});


const colorName=document.querySelector（“.colorName”）；
const genColorBtn=document.querySelector（“genColorBtn”）；
const hexBtn=document.querySelector（“#hexBtn”）；
const rgbBtn=document.querySelector（“#rgbBtn”）；
const hslBtn=document.querySelector（“#hslBtn”）；
让curRGB
//生成随机颜色
常量genRandomColor=（）=>{
const r=Math.floor（Math.random（）*255+1）；
常数g=数学地板（数学随机（）*255+1）；
常数b=数学地板（数学随机（）*255+1）；
curRGB=[r，g，b]
返回新颜色（r、g、b）；
};
genColorBtn.addEventListener（“单击”，函数（）{
const newColor=genRandomColor（）；
document.body.style.backgroundColor=newColor.rgb（）；
colorName.innerText=newColor.rgb（）；
});
hexBtn.addEventListener（“单击”，函数（）{
colorName.innerText=新颜色（…curRGB）.hex（）；
});
//颜色模型转换
类颜色{
构造函数（r、g、b）{
这个。r=r；
这个.g=g；
这个.b=b；
这是calcHSL（）；
}
//向原型添加方法。
十六进制（）{
常数{r，g，b}=这个；
返回(
谢谢你的帮助！