Color Mixer in JS is not working

Question

I am trying to create a color mixer where when you click on the first two divs, they change colors. The combination of the colors of the first two divs are supposed to make the third div a mixture of the first two. So if the first two divs are red then the third should also be red. It is not working and the console is saying Uncaught TypeError: Cannot read property 'backgroundColor' of undefined.

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>

Here is my 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)';
    }

}

Take a look at the second code snippet in the top answer to this question: http://stackoverflow.com/questions/29951130/ Is that the sort of thing you want to make? — Michael Laszlo, May 04 '15 at 17:59

score 1 · Answer 1 · answered May 04 '15 at 17:45

1

well to get you started, you don't need a loop to only do one iteration. Second, the function is expecting values to be sent over in the parameter list, but they are never getting sent. So it's seeing those as null and then you are trying to reference properties of null, so that's why you get that error.

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)';
    }

}

You should be able to work on your color changing logic now

answered May 04 '15 at 17:45

Seth T

305
1
10

so what do I need to change from this? – Aaron Horne May 04 '15 at 18:26
this piece of code still doesn't work. what is wrong with it? – Aaron Horne May 04 '15 at 19:32
it's calling the function and changing the 3rd div, but not mixing if that's what you mean. you may want to search SO for color mixing algorithms – Seth T May 04 '15 at 20:06
It is still reading in the console that it cannot read property backgroundColor of undefined – Aaron Horne May 04 '15 at 20:34
did you change to this? function changeColor(){ – Seth T May 04 '15 at 20:35
yes, and the error goes away but the divs stay the same color – Aaron Horne May 04 '15 at 20:37
right, since it's not getting into the if statements. you are saying if div1 and div2 are red, then switch 3 to red. otherwise if div1 is red and div2 is blue then switch div3 to another color(magenta?). but all divs start as #00DD00. – Seth T May 04 '15 at 20:42
so how would I make each div a separate color from the start? – Aaron Horne May 04 '15 at 20:51
I just made separate div ids for each and made them different colors and the mixer still isnt working. i think im going to look for other mixing algorithms – Aaron Horne May 04 '15 at 21:54

Color Mixer in JS is not working

1 Answers1