Question

我正在尝试创建一个颜色混合器，当你点击前两个div时，它们会改变颜色。前两个div的颜色组合应该使第三个div成为前两个div的混合。因此，如果前两个div为红色，则第三个div也应为红色。它不起作用，控制台说Uncaught TypeError：无法读取未定义的属性'backgroundColor'。

HTML

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        div {
            width: 100px;
            height: 100px;
            background-color: #00DD00;
            margin: 5px;
            float: left;
        }

    </style>
</head>
<body>
    <script src="js/main.js"></script>
</body>
</html>

这是我的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)';
    }

}

Answer 1

为了让您入门，您不需要循环只进行一次迭代。其次，该函数期望在参数列表中发送值，但它们永远不会被发送。所以它看到那些为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)';
    }

}

您现在应该能够处理变色逻辑

JS中的混色器不起作用

1 个答案: