Javascript 如何在不弄脏DOM的情况下制作更干净的JS颜色翻转器？

我用setInterval和Math.random构建了一个随机颜色翻转器

以下是我当前方法中的控制台警告：

应为颜色，但找到“#3acf4”。分析“颜色”的值时出错。声明已删除

我想我的逻辑可能有点倒退

是否有人知道我如何使这个JS更简洁，并清除警告

请，谢谢

//抓取元素
const wrap=document.querySelector（'.page wrap'）；
const infinite=document.querySelector（“.infinite按钮”）；
const reset=document.querySelector（'.reset按钮'）；
让randomColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
让间隔；
//起始颜色翻转
无限。addEventListener（'click'，colorRandomizer）；
//重置颜色翻转
reset.addEventListener（'click'，colorStopper'）；
//定时颜色翻转
函数colorRandomizer（）{
间隔=设置间隔（函数（）{
色度学（）；
}, 300);
}
//停止颜色翻转
函数colorStopper（）{
间隔时间；
wrap.style.backgroundColor=''；
}
//刷新随机颜色
函数inFiniteColor（）{
如果（随机颜色！=''）{
随机颜色=''；
}else if（randomColor==''）{
randomColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
}
返回随机颜色；
}
//胡闹
函数colorMetrics（）{
如果（wrap.style.backgroundColor==“”）{
wrap.style.backgroundColor=InFiniteColor（）；
}else if（wrap.style.backgroundColor='#randomColor'）{
wrap.style.backgroundColor=InFiniteColor（）；
}否则{
wrap.style.backgroundColor=''；
}
}

。换页{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
宽度：100%；
最小高度：100vh；
保证金：0；
}
.无限按钮{
背景：透明；
边框：2倍纯色灰色；
边界半径：5px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100px；
边缘底部：25px；
填充：5px0；
光标：指针；
}
.无限按钮：悬停{
颜色：黄绿色；
背景：灰色；
边框颜色：黄绿色；
}
.无限末日{
字体大小：40px；
保证金：0；
}
.重置按钮{
颜色：印度红；
背景：透明；
边框：2件纯色印度红；
边界半径：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：25px；
高度：25px；
保证金：0；
填充：25px；
光标：指针；
}
.重置按钮：悬停{
颜色：白色；
背景：印度红；
边框颜色：深色；
}
.重置dood{
字体大小：25px；
}

∞


X

//抓取元素
const wrap=document.querySelector（'.page wrap'）；
const infinite=document.querySelector（“.infinite按钮”）；
const reset=document.querySelector（'.reset按钮'）；
让间隔；
//起始颜色翻转
无限。addEventListener（'单击'，（）=>{
间隔=设置间隔（（）=>{
wrap.style.backgroundColor=
（“#”+Math.floor（Math.random（）*16777215.toString（16））；
}, 300);
});
//重置颜色翻转
reset.addEventListener（'单击'，（）=>{
间隔时间；
wrap.style.backgroundColor=''；
});
。换页{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
宽度：100%；
最小高度：100vh；
保证金：0；
}
.无限按钮{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100px；
利润率：25px；
填充物：5px；
背景：透明；
边框：2倍纯色灰色；
边界半径：5px；
光标：指针；
}
.无限按钮：悬停{
颜色：黄绿色；
背景：灰色；
边框颜色：黄绿色；
}
.无限末日{
字体大小：40px；
保证金：0；
}
.重置按钮{
颜色：印度红；
背景：透明；
边框：2件纯色印度红；
边界半径：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：25px；
高度：25px；
保证金：0；
填充：25px；
光标：指针；
}
.重置按钮：悬停{
颜色：白色；
背景：印度红；
边框颜色：深色；
}
.重置dood{
字体大小：25px；
}


∞


X

就像“异教徒猴子”说的那样。。。“生成的颜色仅为5个字符，颜色要求为6个字符。”

我玩了你的密码笔很多分钟，但没有显示错误。。。但无论如何，你可以试试这个：

function inifiniteColor() {
  if (randomColor != '') {
    randomColor = '';
  } else if (randomColor == '') {
    randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);

    // If randomColor length is not 7 (# + 6 hex), complete with zeros
    if(randomColor.length<7){
      randomColor = randomColor + "0".repeat(7-randomColor.length)
    }
  }
  return randomColor;
}

函数inFiniteColor（）{
如果（随机颜色！=''）{
随机颜色=''；
}else if（randomColor==''）{
randomColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
//如果randomColor长度不是7（#+6十六进制），则用零完成
如果（randomColor.Length生成的颜色仅为5个字符，颜色必须为6个字符。将数字归零。您不需要初始值
randomColor
，因为您首先不需要将其作为全局变量。只需将该值传递到
InFiniteColor
函数中即可。此外，您还需要
clearInterval（interval）
每次单击无限按钮时，因为人们可以反复按下该按钮，从而创建额外的间隔