Javascript 在单击时更改颜色

我正在尝试用JS绘制代码。 例如，我想通过单击div“red”将轨迹的颜色从黑色更改为红色，我已经没有主意了（没有jQuery）

let active=false；
常量绘制=函数（e）{
如果（活动==错误）{
返回；
}
常数x=e.clientX；
常数y=e.clientY；
设div=document.createElement（“div”）；
div.style.top=y+“px”；
div.style.left=x+“px”；
文件.正文.附件（div）；
}
const drawActive=函数（）{
活动=！活动
}
函数changeColor（）{
//div.classList.add（“主颜色”）；
}
document.getElementById（“红色”）.onclick=changeColor；
document.body.addEventListener（“mousemove”，draw）；
document.body.addEventListener（“鼠标向下”，drawActive）；
document.body.addEventListener（“mouseup”，drawActive）
正文{
高度：100vh；
保证金：0；
}
#集装箱{
宽度：200px；
高度：200px；
边界半径：0；
背景色：#fff；
位置：固定；
}
div{
宽度：5px；
高度：5px；
边界半径：50%；
背景色：#000；
位置：绝对位置；
}
#红色的{
宽度：25px；
高度：25px；
背景色：红色；
边界半径：0；
利润率最高：18%；
}
蓝先生{
宽度：25px；
高度：25px；
背景颜色：蓝色；
边界半径：0；
利润率最高：6%；
左缘：12%；
}
黄先生{
宽度：25px；
高度：25px；
背景颜色：黄色；
边界半径：0；
利润率最高：18%；
左缘：12%；
}
格林先生{
宽度：25px；
高度：25px；
背景颜色：绿色；
边界半径：0；
利润率最高：6%；
}
.首先{
背景色：红色！重要；
宽度：5px；
高度：5px；
边界半径：50%；
位置：绝对位置；
}
.mainColor{
背景色：红色！重要；
宽度：5px；
高度：5px；
边界半径：50%；
位置：绝对位置；
}

油漆
我使用
querySelectorAll
查找所有div和added条件

if (!document.getElementById("containter").contains(item)) 

删除div id
容器中的内容

document.querySelectorAll('div').forEach(function (item) {
if (!document.getElementById("containter").contains(item))
    item.setAttribute('class', 'mainColor');
})    


let active=false；
常量绘制=函数（e）{
if（active==false | | document.getElementById（“containter”）.contains（如目标））{
返回；
}
常数x=e.clientX；
常数y=e.clientY；
设div=document.createElement（“div”）；
div.style.top=y+“px”；
div.style.left=x+“px”；
文件.正文.附件（div）；
}
const drawActive=函数（）{
活动=！活动
}
函数changeColor（）{
document.querySelectorAll（'div'）.forEach（函数（项）{
如果（！document.getElementById（“containter”）.包含（项））
item.setAttribute（'class'，'mainColor'）；
})
}
document.getElementById（“红色”）.onclick=changeColor；
document.body.addEventListener（“mousemove”，draw）；
document.body.addEventListener（“鼠标向下”，drawActive）；
document.body.addEventListener（“mouseup”，drawActive）
正文{
高度：100vh；
保证金：0；
}
#集装箱{
宽度：200px；
高度：200px；
边界半径：0；
背景色：#fff；
位置：固定；
}
div{
宽度：5px；
高度：5px；
边界半径：50%；
背景色：#000；
位置：绝对位置；
}
#红色的{
宽度：25px；
高度：25px；
背景色：红色；
边界半径：0；
利润率最高：18%；
}
蓝先生{
宽度：25px；
高度：25px；
背景颜色：蓝色；
边界半径：0；
利润率最高：6%；
左缘：12%；
}
黄先生{
宽度：25px；
高度：25px；
背景颜色：黄色；
边界半径：0；
利润率最高：18%；
左缘：12%；
}
格林先生{
宽度：25px；
高度：25px；
背景颜色：绿色；
边界半径：0；
利润率最高：6%；
}
.首先{
背景色：红色！重要；
宽度：5px；
高度：5px；
边界半径：50%；
位置：绝对位置；
}
.mainColor{
背景色：红色！重要；
宽度：5px；
高度：5px；
边界半径：50%；
位置：绝对位置；
}

油漆