Javascript JS中的颜色混合器不工作

我试图创建一个颜色混合器，当你点击前两个div时，它们会改变颜色。前两个div的颜色组合应该使第三个div成为前两个div的混合物。因此，如果前两个div是红色的，那么第三个div也应该是红色的。它不工作，控制台显示UncaughtTypeError:无法读取未定义的属性'backgroundColor'

HTML

div{
宽度：100px；
高度：100px；
背景色：#00DD00；
保证金：5px；
浮动：左；
}

这是我的JS

for(var i = 0; i < 1; i++) {

    var newDiv = document.createElement("div");
    newDiv.addEventListener('click', changeColor);
    document.body.appendChild(newDiv);

    var newDivTwo = document.createElement("div");
    newDivTwo.addEventListener('click', changeColor);
    document.body.appendChild(newDivTwo);

    var newDivThree = document.createElement("div");
    newDivThree.addEventListener('click', changeColor);
    document.body.appendChild(newDivThree);

}

function changeColor(newDiv, newDivTwo, newDivThree){
    if (newDiv.style.backgroundColor =='rgb(255, 0, 0)' && newDivTwo.style.backgroundColor =='rgb(255, 0, 0)'){
        newDivThree.style.backgroundColor ='rgb(255, 0, 0)';
    }
    else if (newDiv.style.backgroundColor =='rgb(255, 0, 0)' && newDivTwo.style.backgroundColor=='rgb(0, 0, 255)'){
        newDivThree.style.backgroundColor='rgb(255, 0, 255)';
    }

}

for（变量i=0；i<1；i++）{
var newDiv=document.createElement（“div”）；
newDiv.addEventListener（'单击'，更改颜色）；
文件.body.appendChild（newDiv）；
var newDivTwo=document.createElement（“div”）；
newDivTwo.addEventListener（'click'，changeColor）；
document.body.appendChild（newDivTwo）；
var newDivThree=document.createElement（“div”）；
newDivThree.addEventListener（'click'，changeColor）；
document.body.appendChild（newDivThree）；
}
函数changeColor（newDiv、newDivTwo、newdivtwree）{
if（newDiv.style.backgroundColor=='rgb（255，0，0）&&newDivTwo.style.backgroundColor=='rgb（255，0，0）'{
newDivThree.style.backgroundColor='rgb（255,0,0）'；
}
else if（newDiv.style.backgroundColor=='rgb（255，0，0）&&newDivTwo.style.backgroundColor=='rgb（0，0，255）'{
newDivThree.style.backgroundColor='rgb（255,0255）'；
}
}

要开始，您不需要只进行一次迭代的循环。第二，函数期望在参数列表中发送值，但它们永远不会被发送。所以它将这些视为null，然后尝试引用null的属性，这就是为什么会出现该错误

var newDiv = document.createElement("div");
newDiv.addEventListener('click', changeColor);
document.body.appendChild(newDiv);

var newDivTwo = document.createElement("div");
newDivTwo.addEventListener('click', changeColor);
document.body.appendChild(newDivTwo);

var newDivThree = document.createElement("div");
newDivThree.addEventListener('click', changeColor);
document.body.appendChild(newDivThree);

function changeColor(){
    if (newDiv.style.backgroundColor =='rgb(255, 0, 0)' && newDivTwo.style.backgroundColor =='rgb(255, 0, 0)'){
        newDivThree.style.backgroundColor ='rgb(255, 0, 0)';
    }
    else if (newDiv.style.backgroundColor =='rgb(255, 0, 0)' && newDivTwo.style.backgroundColor=='rgb(0, 0, 255)'){
        newDivThree.style.backgroundColor='rgb(255, 0, 255)';
    }

}

---

您现在应该能够处理颜色更改逻辑了

看看这个问题顶部答案中的第二个代码片段：这就是您想要做的事情吗？那么我需要从中更改什么呢？这段代码仍然不起作用。它有什么问题？它调用函数并更改第三个div，但如果这是你的意思，它不会混合。您可能希望搜索颜色混合算法，因为它仍在控制台中读取，因此无法读取Undefineded的属性backgroundColor您是否更改为此？函数changeColor（）{

var newDiv = document.createElement("div");
newDiv.addEventListener('click', changeColor);
document.body.appendChild(newDiv);

var newDivTwo = document.createElement("div");
newDivTwo.addEventListener('click', changeColor);
document.body.appendChild(newDivTwo);

var newDivThree = document.createElement("div");
newDivThree.addEventListener('click', changeColor);
document.body.appendChild(newDivThree);

function changeColor(){
    if (newDiv.style.backgroundColor =='rgb(255, 0, 0)' && newDivTwo.style.backgroundColor =='rgb(255, 0, 0)'){
        newDivThree.style.backgroundColor ='rgb(255, 0, 0)';
    }
    else if (newDiv.style.backgroundColor =='rgb(255, 0, 0)' && newDivTwo.style.backgroundColor=='rgb(0, 0, 255)'){
        newDivThree.style.backgroundColor='rgb(255, 0, 255)';
    }

}