why is my script keep repeating multiple times? jquery

[et4891]

I have divs which can be clicked and then another div will pop out with few colors for users to choose.

After choosing the colors in the div that pop out the div that is clicked will change into that background.

I used class to determain which div is clicked.

function works fine but I realized when I try console.log the class I used as global to findout which div to change the background. the console.log keeps adding up also multiplying too.

 

Can I have a pair of eye to see where it's adding things up?

var colorHolder = null; //used to store the location where color is picked

    function colorFieldPicker(onClickSide, xValInput, yValInput,side){
        onClickSide.on('click', function(event){
            colorHolder = $(this).attr('class');
            var yVal = (event.pageY - yValInput) + "px";
            var xVal = (event.pageX / xValInput) + "px";
            $('.colorSelectBox').css({"left": xVal, "top": yVal}).toggle();
            colorPickerOnClick(side);
        });
    }


    function colorPickerOnClick(side){
        $('div.black').add('div.yellow').on('click', function(){
            var colorAttr = $(this).attr('value');
            var splitClass = colorHolder.split(" ");
            side.closest('div').find('.'+splitClass[0] + '.'+splitClass[1]).css({"background": colorAttr}).attr('value', colorAttr);
            console.log(colorHolder);  //this is where it's displaying in console that it'll keep on adding up.
            $('.colorSelectBox').css({"display": "none"});
        });
    }

Thanks everyone in advance.

Edited August 12, 2015 by et4891

[requinix]

Adding up? Multiplying?

[et4891]

Adding up? Multiplying?

adding up....it's like going 1,2,3 then 3, 6 something like this randomly. well works well if I didn't use the console.log I wouldn't even realize it's repeating so many times because it works.

[requinix]

It's logging the value of colorHolder, which is a class name from some element. The code is pretty clear about that. Are you sure there isn't something else modifying that variable?

[et4891]

It's logging the value of colorHolder, which is a class name from some element. The code is pretty clear about that. Are you sure there isn't something else modifying that variable?

nope, after you asked, I searched the script for colorHolder again to make sure.  But in the whole script the variable colorHolder only showed up 3 times which is the same as the script I posted.

first is using it to declare as a global variable, 2nd time is to assign the class of an element to it 3rd is to split the variable since the variable will be assigned with two classes.