Javascript JS：什么函数会让我的代码变得枯燥？

我的节目
最初在黑色网格上绘制的蚀刻草图。用户单击“擦除”在黑色方块上着色。用户还可以单击**彩虹”在每个方块上绘制随机颜色，即方块[0]可以是蓝色，方块[1]可以是紫色…等等，它们在每个鼠标上方都是随机的

问题 您会注意到，橡皮擦网格（）和drawRainbow（）的代码几乎相同。我必须这样做，否则程序将无法正常工作。这是Rainbow在每个鼠标上方绘制不同颜色的唯一方法

目标 如果你看一下我在底部注释的函数，我试着想出一些我可以用于橡皮擦网格（）和drawRainbow（）的东西，但是当测试该函数时，它并没有按预期工作。它不会在每个鼠标上方绘制随机颜色，而是会创建一个随机颜色（比如蓝色）然后在网格上绘制蓝色。如果我再次切换彩虹，它将创建另一种随机颜色（例如绿色）并在网格上绘制。
我不明白为什么我创建的函数不能按预期工作，而重复的代码却能

---

/***************************输入->按钮DOM****************************/
const newGrid=document.getElementById（'new-grid'）；
addEventListener（'click'，createGrid）；
const erase=document.getElementById（'erase'）；
erase.addEventListener（“单击”，eraseGrid）；
const rainbow=document.getElementById（'rainbow'）；
rainbow.addEventListener（'click'，drawRainbow）；
/***********************网格变量及其创建***********************/
const main=document.querySelector（'main'）；
const div=main.getElementsByTagName（'div'）；
绘图网格（16，（（600/16）-2）+“px”）；
pickColor（“#333”）；
函数createGrid（）{
//从最大到最小删除div
for（设i=main.childNodes.length-1；i>=0；i--）{
main.removeChild（main.childNodes[i]）；
}
让大小；
做{
size=parseInt（提示（“请输入一个从1到64”的数字），10）；
}而（数.isNaN（大小）| |大小>64 | |大小<1）；
常量numPx=（600/尺寸）-2；
设px=numPx+‘px’；
绘图网格（尺寸，px）；
pickColor（“#333”）；
}
函数pickColor（颜色）{
for（设i=0；i

你可以算出名字，但看起来你只是在做

function go(str1, str2){
    document.getElementById(str1).classList.toggle(str1);
    if (document.getElementById(str1).className === str1) {
        document.getElementById(str2).classList.remove(str2);
        main.addEventListener('mouseover', function(){
            pickColor('#f2f2f2');
        })
    }
    else {
        main.addEventListener('mouseover', function(){
            pickColor('#333');
        })
    }
}

只需使用

go（'erase'，'rainbow'）

或

go（'rainbow'，'erase'）调用它即可。

---

你可以算出名字，但看起来你只是在做

function go(str1, str2){
    document.getElementById(str1).classList.toggle(str1);
    if (document.getElementById(str1).className === str1) {
        document.getElementById(str2).classList.remove(str2);
        main.addEventListener('mouseover', function(){
            pickColor('#f2f2f2');
        })
    }
    else {
        main.addEventListener('mouseover', function(){
            pickColor('#333');
        })
    }
}

只需使用

go（'erase'，'rainbow'）

或

go（'rainbow'，'erase'）调用它即可。

---

至于注释掉的changeColor函数，您应该能够像这样重构它，如果您将rainbow和erase放在父对象中，这样您就可以按名称找到它们

const objects = {erase, rainbox};

function changeColor(str1, str2) { 
    objects[str1].classList.toggle(str1);
    if (objects[str1].className === str1) {
        objecs[str2].classList.remove(str2);
        main.addEventListener('mouseover', function(){
            pickColor('rgb(' + randColor() + ')');
        })
    }
    else {
        main.addEventListener('mouseover', function(){
            pickColor('#333');
        })
    }
}

同样，正如@me_uuu在评论中提到的。每次单击都添加一个eventListener很可能不是您想要的。在第五次单击之后，您将有五个eventListener，以及五个函数

function（）{pickColor（'rgb（'+randColor（）+'）；}

，每次鼠标悬停在“main”上时都会调用这些函数（每次单击都会不断扩展…）

（编辑，因为注释限制性太强：）

---

00Saad：我看到有一个removeEventListener（）方法，我会通过在addEventListener之后添加main.removeEventListener（'mouseover'，function（）{pickColor（'rgb（'+randColor（）+'））；}）来实现它吗

不，如果您希望以后能够轻松删除函数，请将其存储在变量中

---

function（）{…}

对于注释掉的changeColor函数，如果您将rainbow和erase放在父对象中，那么您应该能够像这样重构它，以便按名称查找它们<

const objects = {erase, rainbox};

function changeColor(str1, str2) { 
    objects[str1].classList.toggle(str1);
    if (objects[str1].className === str1) {
        objecs[str2].classList.remove(str2);
        main.addEventListener('mouseover', function(){
            pickColor('rgb(' + randColor() + ')');
        })
    }
    else {
        main.addEventListener('mouseover', function(){
            pickColor('#333');
        })
    }
}

let isRandomColor = true;
main.addEventListener('mouseover', function(){
  pickColor( isRandomColor ? randomColor() : '#333' );
});

function changeColor(){
  if (...){
    isRandomColor = true;
  } else {
    isRandomColor = false;
  }
}